CSR, SSR, and SSG on NextJS 

He is really professional

You're welcome. Thanks for the feedback!

I've slowed my pacing down in more recent videos. I probably would break it up now. :)

Thank, happy to help!

i know Im quite randomly asking but do anybody know of a good place to stream newly released series online?

@Alvin Leo Thank you, signed up and it seems like they got a lot of movies there :) I really appreciate it !

@Nash Kairo Glad I could help =)

Thank you!

Thanks for the feedback. I've slowed them down a lot since this video.

Yep. It's a good box. I don't really use it as much as I should though.

Have a look at incremental static generation: nextjs.org/blog/next-9-5#stable-incremental-static-regeneration.

That's a really great question. I need to focus more on accessibility. And I need to integrate it into my videos. When I first started this I told myself, "The examples need to be accessible", but I've been really bad about that. :(

Yes, but NextJS isn't going to know anything about it. NextJS would statically generate the page which would then that client-only code (probably through a run-time check on `document` or `window`) to render components of the client only. You will get some React errors most likely during page rehydration, but those can be disabled. Another alternative would be to use Module Federation loading the dashboard components on demand: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tigwyK5Khck.html

NextJS supports and incremental rebuild of pages when the underlying data changes. So in the first example SSG would still be fine. In the second example with personalized data I would go with SSR or CSR. SSG is good for pages where the same data is returned to every customer.

If it's SSG then yeah, you load a new page in the standard web style of old. That's expected behavior, at least to me. :) You could build it SPA style, but it would take some effort and I don't think it would come out of the box with NextJS.

My advice would be statically site generate or client side render whenever you can get away with it. In either case you don't need to monitor frontend servers, which is great. SSR is something that I would do only if I couldn't get away with CSR or SSG, and the SEO team was 100% insistent on it. That being said, Google said about four years ago now, that you can have two different rendering systems, one for the bot and one for the customer, if the result was basically the same. So companies like Botify can do that Google bot rendering and then your customers would see the CSR experience. Basically I'm a fan of any deployment technique that is first, performant for the consumer, and second, doesn't require pager duty. :)

I'm just doing that here because I didn't want to create another server for the demo. IRL most often we are calling microservices on the backend in getServerSideProps.

Not a bad question at all. Yeah, so a statically generated page is going to be the one that uses getStaticProps or getServerSideProps to fetch data, instead of a useEffect on the client. That being said, ALL pages on NextJS are server side rendered. So if your page doesn't get any data, but still has tags on the page, then those tags will be rendered on the server before they are sent to the client.

@@jherr Thanks for sparing some time for answering me! I am trying to implement redux / redux-thunk on a nextjs dummy project in order to test and learn the framework. So I found a good configuration explained by vercel on their examples. The thing is that now with your explanation, I guess that I was doing some wrong approaches. I did not manage to get the data received through getStaticProps into my redux store, as in this config we use namely exports of hooks. The one I was using was useDispatch to dispatch actions into the store, and these cannot be used out of the React component. So I was getting the static props into the component, then using useEffect() to get these into my store, then render the data somewhere through redux. Now I feel really stupid, as it seems that I am killing the functionality that NextJs provides by taking this approach, correct? I should get a way of probably rendering whatever my page needs to show for SEO purposes, directly without waiting on redux, and somehow get whatever data I need for the client on the central store without killing the static props rendering flow, correct?

@@yoda_zen Yep. If you need SSR for SEO then you have to get the data getServerSideProps and then pass that to the components for rendering. This is a simplistic example that isn't doing any server fetching, but it's not a bad starting point. github.com/vercel/next.js/blob/canary/examples/with-redux/pages/ssr.js Please don't say you feel stupid. This is complex stuff and it's very ok to get it wrong before you get it right. That's all part of the process of learning.

Cascadia code.

@@jherr okay, thanks !

I'd go with a static approach if I could get away with it because you don't need to run or monitor a server. And so that means CSR or SSG.

Can you point to a particular time in the video?

Sure, an eCommerce site might use SSG for the home and product pages, SSR for the search page and CSR for chart, checkout, order history.

@@jherr Thanks, If possible please make a video on a simple e-commerce site using these three rendering techniques, and also can we use this three-technique in gatsby? I am a machine learning engineer and also a blogger So I planning to make my own blog web app with user interactive machine learning content. I have less experience in a web application, So I confused to choose nextjs or gatsby and I want to build it faster. So I planning to use hasura and nestjs for the backend. But for the frontend, I really confused about which one to use and also about the pre-rendering , rehydration word. I want to use combination CSR, SSR, and SSG. So can you suggest to me which framework to use, and also a hint to use three CSR, SSR and SSG. It will be really helpful if any suggestions Thanks.

@@vigneshamudha821 I'm pretty much booked up on Module Federation for the month of June. But after that, and maybe if NextJS supports Module Federation, I'll run exactly this example as a series. ;)

@@jherr Thanks for the quick reply, I will wait for it...

@@jherr Looking forward to this series :) Hope to see it soon.

SEO for SPAs have worked fine for years.

@@jherr in that case, using code splitting with something like solid should be a fine choice for most scenarios right? The load time will still be small, and you can host the files on s3. Am I missing something?

@@boot-strapper Yes, in most cases code-splitting is fine. The issue comes when two (or more) independently deployed applications want to share some code and it needs kept 100% up to date between the two. You can't do that with traditional bundles/code splitting.

Yeah, NextJS is never going to give you a true CSR like a create-react-app would. It's always going to be SSR'ed. But it will be without the data unless you use getInitialProps, etc.

@@jherr yes sir i noticed that nextJs comes with pre-rendering notion that helps pages to be seo friendly , and by default nextJS uses SSG and IF the page has some data to fetch we have to 2 options : -1-fetch the data from server using getStaticProps for( SSG Pages) or getServerSideProps for (SSR Pages) -2-fetch data on the client side (csr) using swr and if we call a page that uses getStaticProps (ssg) or getServerSideProps (ssr) with Link api the browser send an api to the server and secives js file for that navigated page and it's JSON file , and at this point the browser render or inject the new js to page to make it SPA.

Well, you should check whatever you are de-referencing `english` from because it's clearly null when you don't expect it to be null.

@@jherr This is [name].js. Hopefully it's enough to pinpoint what the issue is. const fetcher = async (endpoint) => fetch(`localhost:3000${endpoint}`) .then(res=>res.json()) .then(res=>res) const getPokemon = () =>{ const router = useRouter() const myAPI = `/api/pokemon` const pokemon = `?name=${router.query.name}` const myEndpoint = myAPI+pokemon const {data, error} = useSWR(myEndpoint,fetcher) if (error) return null return data } export default () => { const data = getPokemon() return {data && data.name.english || "Pokemon"} {data && {data.name.english} {Object.entries(data.base).map(([key,value])=> { return {key} {value} }) } } }

If you are 100% that you are never going to need SSR or SSG then absolutely you could just use CRA. The nice thing about NextJS is that you have all three without having to port your code over.

@@jherr thank you for the reply. What about state management? Did you find any issues with any ui libraries as well?

@@Valiant600 Definitely works with state managers - github.com/vercel/next.js/tree/canary/examples/with-redux . With CSR there is no difference, but with SSR/SSG you've gotta do the work of getting the data into Redux from the SSR state payload.

​@@Valiant600 That one there are issues around actually. NodeJS doesn't have `window` or `document`, so if a library uses `document` or `window` to manage transitions (or whatever) and they don't first check to see if they are there then boom. You really don't see it that often any more. But I have seen a recent example with visx which I found very surprising. Just something to look out for when you are evaluating libraries. Honestly though, if a library doesn't do that check and blows up on SSR, I'd be a little wary about it's code quality in general. `window`/`document` is a problem we've known about for seven plus years now, engineers should know better.

@@jherr exactly. "Hardcoding" window or document is anyway strange and bad practice. Thank you for all the info :)

Yes.

I mean a data set that's not real time updating. For example, I wouldn't statically generate a social network site.

@@jherr Thanks for the fast answer Jack, you just got yourself a new subscriber :)

You mean with fully qualified URLs from within the generated pages?

@@jherr yes, like for example /post/1, if I do next export and run the build, it will return a 404 although /post/[id] will return something

@@jonasgroendahl Put something up on github and DM me on Twitter @jherr and I'll take a quick look.

A regular link to a new fresh page would not be a "SPA" experience. You'd lose state, the page would go blank, as you say, definitely not SPA. The reason that some folks SSR or SSG a page is that they are rendering your starting point into the SPA for you, assuming that you start with a Google search and then enter the site on a deep link as opposed to the home page. But subsequent navigation should be "soft links" that are managed on the client.

@@jherr So do next convert to soft links with rehydration or do we need to add onClick events aswell or how do we go from SSG->CSR?. Also, if we want to implement searchbar in a header that is visible both in index/landing and product page, can we go from ssg rehydrate/load javascript for search and eventually be in csr-mode?

@Fredrik Johansson As far as I've seen it works just fine. Links get turned into anchor tags during static or SSR and then into SPA links in CSR. Give it a try and find out. 😀

@@jherr Ok, i did try getting the searchbar into the ssg detail page , but failed. Neither useRouter or anything else can pass props and implementing a context like redux will surely make it non ssg:able?. Luckily i don't think it's practical to have search there. a shopping cart on the other hand, guess i have to try with useRouter for that.

@@FredrikJ836 The combination of NextJS and Redux is interesting, it's definitely doable. But I'm not always sure what the advantage is. I suppose if you have a page with really complex page with complex interactivity that you want to pre-seed through SSR, maybe there is a case there. But most of the time I find that the code I use to fetch the data for SSR ends up replacing most/all of the Redux store, and any extras can be picked up with some useState.

If you need data for the page and you don't make the request in `getServerSideProps` then that is, effectively, client side rendering. Though, as you are right to point out, it's not 100% CSR as it is with create react app.

@@jherr Can client side rendering similar to CRA be achieved with Next? Or maybe can we have a hybrid setting in the Next app where some pages are SSG/SSR and some are 100% client side rendered? I have a similar situation at my workplace and I am unable to find this hybrid setting. TIA.

@@akashchokshi2283 I think 'hybrid mode' refers to a combination of SSR and SSG. To really restrict what's rendered on the server I use `typeof window` checks, but NextJS does complain about that in reconciliation.

@@jherr Actually I am looking for a coexistence between SSG, SSR, and 100% client side rendering. Since certain pages of my web app do not need to be SSR/SSR.

@@akashchokshi2283 Personally I don't see why a partially rendered page is significantly different than just a blank page. If 100% of your page requires customer specific data requested from the client then just wrap the whole content section in a conditional on the existence of the data, and only fetch the data from the client. Then you get what you want, 100% CSR.

Yes, but NextJS has incremental rebuild so you don't have to rebuild everything to just add a single pokemon.

@@jherr thank you sir

It's a question of build and deploy processes. You can run the static generation as part of a build process or on a cron job or triggered by data updates in the database and send that content to S3 (or equivalent). And you can also deploy the server to EC2/ECS/GCP wherever. And then for routing you have a CDN that points the SSG routes to S3 and the rest goes through to origin and hits the SSR code on the server.

There are two ways to create a Regular Expression in JS. One is the shorthand version with the slashes. And the second is to use `new RegExp` where the first argument is a string with the contents of the regular expression, and the second argument is any flags (i for case insensitive, g for global, etc.)

@@jherr wow got reply! thanks for your work it is appreciated.

SSR is the "default". It renders your page as is, and then if there are optional methods like getInitialProps it calls those. And then the static generation more is triggered by the presence of the static methods.

Yep, absolutely. Good call.

You're not dumb, and the reason that they might be used together is that a CMS system is the backend that holds all the data, and the SSG site is the frontend that shows that data. And it's really a choice on the frontend of their rendering the data from the CMS on every request (SSR), rendering the data from the CMS on the client side (CSR), or rendering the data once during building time and then only-rendering if the renderer or the data changes (SSG).

@@jherr oh thanks for this nice explanation, is there any way to trigger build process when automatically when content changes ? e.g when site is already deployed to cdn like netlify

@@zarghamkhan7948 yeah, a message bus can be used to trigger a rebuild. NextJS has an incremental build system now, though I haven't used that myself. as static deployments become more commonplace support for managing that build pipeline is getting better.

Yep.

Nuxt is Vue, NextJS is React. Tough to compare those two.

Except that you can mix and match SSR/SSG/CSR per route.

@@jherr Thanks! I've now actually used both on one of my nextjs projects. I didn't see all good stuff included in next 10 +

@@alexkey9372 it's an amazing framework.

@@jherr agreed! i built a headless cms site with it and after I introduced the ssg stuff is blazing fast.

@@jherr A new thing I discovered though that kind of bugs me is that if I use the ssg stuff the content is not updated when db is updated, I need to re-build the whole site. Is there a way to fix this problem?

They are just like any other static resource. You could put them behind basic auth. Or you could use auth client side on the page. Honestly though, I think SSG is primarily suited for public sites where you want large volumes of pages to be served quickly. Great question though!

@@jherr I mean yeah, they are just static pages, but the way how nextjs fetchs and uses them is kinda tricky. And I have no idea how can one could put them behind basic auth. Also using client side auth does not seem to be secure AFAIK. And I agree that SSG is perfect for public, but still I want the same awesome experience for my authenticated users. There was a discussion over here github.com/vercel/next.js/discussions/10724. But I could not understand their point. I might want to do my own research, and will share results here in comment too.

@@nchecker00 I’d look into how they do paywalls.

@@jherr Not particularly research, but reading their docs and going through some examples, discussions I learnt that the best way to show private data is to use client-side fetching with a caching tool (react-query, swr).

@@nchecker00 I'd actually be interested in learning more about that myself and maybe making a video on it. Any links you can provide would be great.