CSR, SSR, and SSG on NextJS

[@sealjack7988]

watched 5 videos about the same topic, this one is the best so far with great examples and clearly explained the cons and pros. Thanks Jack!

[@fiendsgaming7589]

He is really professional

[@RafaelFerreiraffael]

Wow man, this video was exactly what I needed. Thank you so much! You got yourself a subscriber. Keep up with videos like this!

[@hunterjennings4708]

Man, this content is just incredible. Seemingly every time I'm trying to grok a new topic like this, you've already gone ahead a created an informative video about it. Thanks for sharing your knowledge with everyone, Jack; it's immensely helpful.

[@brunosastre1948]

What a beautiful workspace. The look outside the window is priceless also.

[@faizanahmed9304]

beautifully explained, thank you sir

[@timothyleelong6295]

This is the most succinct explanation of these three concepts that I have come across. Thank you for the video. I finished FSA bootcamp a few months ago wherein we mostly coded CSR sites. I encountered a demand for rendering efficiency with a freelance client and have been using Next.js. This video really helped clear up any grey areas I had.

[@jherr]

You're welcome. Thanks for the feedback!

[@iliatalebzade8751]

This is the guy who you would have in Skyrim if you invested all your character points on "Awesomeness" Thanks a million times man!

[@adedejistephen]

Great, great video! You explained everything seriously obscured to me with Next.js! Thank you.

[@jherr]

Thank, happy to help!

[@nashkairo4863]

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

[@nashkairo4863]

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

[@alvinleo2987]

@Nash Kairo Glad I could help =)

[@danielalonge5004]

Great stuff I thought having 3 topics fused together was an overkill but interestingly you nailed it 👍

[@jherr]

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

[@inversebrah]

your channel is criminally underrated, great work man!

[@AlvaroDevLabs]

Amazing video, very well explained, also gotta love tutorials with pokemons ;)

[@ahmedabdelmotey3875]

that is pretty amazing, informative and straight to the point. Thank you :)

[@sideshowlol]

Hey Jack, that was incredibly helpful. 🙏 Your explanations are refreshingly clear and concise. Also, I kept having to hit pause to see what you just did. "Wait... what was that?" 😆 You include so many great little tips as you step through the three rendering processes. New subscriber here. 😎👍

[@DeepakSingh-uf5vv]

Subscribed....the explanation is just phenomenonal. 😁

[@xentrocity]

wow, never has a like and subscribe been more deserved. thanks so much man.

[@georgekrax]

Finally I understood clearly, how to fetch data with Next.js. Thank you!

[@raipeter]

Really loved the explanation with detailed information. Thank you for this !!

[@jakebanks8903]

Really appreciate the pacing in this video, thanks!

[@willpick]

Great video! Thanks for all the videos!

[@subhamshaw1726]

awesome very straight to point and helpful

[@ABDULSALAMAYINLA]

Super clear and straight to the point

[@kev18284]

Just watched the video halfway through and was so impressed I paused it and came here to comment

[@Brandon-youtube]

Very surprised to see the low view count and relatively low subscriber count compared to the quality of your videos. Keep at it ! Your production quality and content curation are superb. I would have liked a little bit slower pace in the code portion and maybe a bit more explanation of what was going on for people unfamiliar to the framework

[@jherr]

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

[@flash_gif]

best vid, no other ones goes into this much details, thanks.

[@marktomlful]

This was of immense help. Thanks Jack

[@elpmid]

I love this tutorial. This is what i've looking for. Thanks!

[@jasonhoi85]

Thanks! This is just what I needed to rush into code and stop as I needed!

[@_tonygaeta]

Subscribed! I’m very glad I found this video. You’re a really good teacher!

[@jherr]

Thank you!

[@pewdoc]

Awesome, Found What I needed :D thank you so much

[@suyashgulati]

This was actually very good. Thanks a lot man!

[@gabrielsanmartin8326]

Great way to explain these concepts!! Your explanations are pretty clear. Thanks!

[@arjunghimire6709]

Great work. Thank Jack

[@chandranathgupta4500]

thank you very much, very clear explanation.

[@imajt5]

Thanks a lot for this explaination

[@proptyme]

Excellent video lesson, loved it

[@ahnaafarafee]

Best informative video...keep it up! 💘

[@rangabharath4253]

Awesome as always 👍😀

[@sofaraydj]

very good lesson, helpful. thx

[@Otterotter42]

Hey Jack, what do you mean by slow-moving at 24:48 ?

[@jherr]

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

[@Otterotter42]

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

[@husseinhasan7758]

Thank you so much for the it was so helpful. But, in the ssr part 13:08 min I noticed that you fetch the api route from getServerSideProps. I read from the Next official docs. they mention: "It can be tempting to reach for an API Route when you want to fetch data from the server, then call that API route from getServerSideProps. This is an unnecessary and inefficient approach, as it will cause an extra request to be made due to both getServerSideProps and API Routes running on the server" What do you think about this? Is there a better way fetch the data and send them to the client?

[@jherr]

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.

[@Agamista379]

Thank you so much, this was so helpful and right to the point 🙏

[@ahmedadebisi881]

Great video! Which font family is this?

[@mohalhakeem]

Thanks for the video! Exactly what I was searching for. On a side note, is that a Universal Audio Apollo behind you on the desk? Expensive piece of hardware for musicians :)

[@jherr]

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

[@RossOlsonDotCom]

I appreciated the aria-label attribute you put in there for the search page. How do you keep accessibility in mind while you’re focused on getting the project started?

[@jherr]

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. :(

[@fh3r3]

Thanks bro!I've subscribed! :)

[@joemart6887]

4:04 What would be the difference between using: export default ((req, res) => { ... return }) and export default ((request : NextRequest, response: NextResponse) => { ... return } )?

[@MJQ-Devanshu]

Thanks Jack!!

[@thomaspotterdotexe]

With SSG, can it be using with dynamic contents and routes like blog or marketplace?

[@lavisharma3210]

Great Video 👌 What editor font do you use ??

[@jherr]

Cascadia code.

[@lavisharma3210]

@@jherr okay, thanks !

[@mitchel3392]

In the last part of your video you said that CSR is pretty much the only way of doing SPA's. I've also read some things online where people say they are using SSR for their SPA. However, I'm wondering whether this is possible for a 'true' SPA. Both SSR and SSG cause the page to go blank, thus not providing a SPA like experience, isn't it?

[@jherr]

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.

[@FredrikJ836]

@@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?

[@jherr]

@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. 😀

[@FredrikJ836]

@@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.

[@jherr]

@@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.

[@danieljohnmorris]

Where you type data && () - is there any docs on this approach to looping?

[@jherr]

Can you point to a particular time in the video?

[@yoda_zen]

Hello there, Mr. Herrington! I am really new to Nextjs and I how can one determine that a "page" will be on SSR, SR or CSR? Would it be how your props are received (using useEffect for http requests for CSR, using getStaticProps for SR and using getServerSideProps for SSR? Thanks in advance and sorry for the dummy question =D This video is astonishing!

[@jherr]

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.

[@yoda_zen]

@@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?

[@jherr]

@@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.

[@birdofhermes6152]

Thanks for this tutorial

[@akashchokshi2283]

The default app created using npx create-next-app with typescript has by default non CSR pages. I can see all the HTML in view page source, and also can see the HTML content in network tab returned by the server. Where exactly is CSR happening?

[@jherr]

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.

[@akashchokshi2283]

@@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.

[@jherr]

@@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.

[@akashchokshi2283]

@@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.

[@jherr]

@@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.

[@joemart6887]

11:11 I used SWR instead of useQuery. It was working just fine until I got to render the [name].js data info. It worked on the first render, but after I refresh the browser page, it displays the error: `TypeError: Cannot read properties of undefined (reading 'english')` I'm not sure if it's related to an SWR issue, but it's the only thing I've changed in the entire project.

[@jherr]

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.

[@joemart6887]

@@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} }) } } }

[@vijaychouhan3392]

Perfect

[@Valiant600]

Greate video. But I was wondering, for pure CSR is Next.js a valid option or a pure SPA approach like using CRA would be better?

[@jherr]

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.

[@Valiant600]

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

[@jherr]

@@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.

[@jherr]

​@@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.

[@Valiant600]

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

[@doaaismael215]

Thank you so mcuh

[@himanshutariyal7648]

Great video man. You nailed it. One question : If I have something like a blog where I have only static pages and I add new pages frequently. How will I use SSG as the new page will not be built and will be added in future ? They will be on database

[@jherr]

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

[@codexyz97]

hope you reply to me sir to clarify this point for me: great video but sir i have some questions: we know that the main feature of a pure csr is that the server return a blank html with the full bundler to the browser and then the browser load the js bundler and create the html content, i tried to see that in your first example ( csr example )by opening the network dev tab and the html sent by the server is not blank so we have pre-rendering of that initial page happend on the server not in the browser . so in my opinion next js dont have the ability to render blank html and let the (all) rendering part for the browser i think that the initial html page must be pre -rendered ssr or ssg and after that your can make your app behave like an SPA apps by navigating using Link api.

[@jherr]

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.

[@codexyz97]

@@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.

[@variancaesar4778]

For the ssg, if I add more pokemons, do I need to rebuild it in order to be able to access the page?

[@jherr]

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

[@variancaesar4778]

@@jherr thank you sir

[@crimx7635]

Hi, thank you for the great video. This one is the easiest to understand so far (at least for me). I have a question. So far, you only show how to use in view-only page. Let say, I already have a page using SSG and already deployed it. If, I want to add one more pokemon into the list, I have to rebuild the app and redeploy it, right? So, do I have to use SSR for this case? Another concern is, let say I have a feature for user to input their own pokemon stats. Because of that, same pokemon might have different stats depending on how user's build. What's the best approach for this? Is it SSR too? Thank you

[@jherr]

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.

[@AmitErandole]

@Jack Would you have any advice on: How do nextjs devs decide when to render react components on the server and when to render them on the client?

[@jherr]

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. :)

[@vigneshamudha821]

thanks for the great video content, is there any use cases to use all three-technique to a single application like a hybrid. if so any suggestions regarding using all three-technique

[@jherr]

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.

[@vigneshamudha821]

@@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.

[@jherr]

@@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. ;)

[@vigneshamudha821]

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

[@saylormic]

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

[@albertoarriaga9611]

In the CSR example, the API folder is mimicking an external API correct?

[@jherr]

Yes.

[@josemgarlla74]

Hey Jack, thanks a lot for your videos and creating such valuable content, thank you very much for that.Regarding this particular video, I've been playing around with all three solutions, and I have a doubt with the ssg one. I have built and checked that all the html pages and json files are created, then using the production server, npm run start, I see that the html page for a particular pokemon is served correctly when I request that page to the server, so far so good. However, when I navigate from the index page to a particular pokemon info page, e.g /pokemon/charizard by clicking on the charizard card(so using the Link component under the hood), I see that the server sends the html page instead of the json file, and if I'm right we should get the json file since we are navigating client side. I'm probably missing something so thanks a lot in advance for any suggestion regarding this doubt.

[@jherr]

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.

[@milhamfarrohi]

So what is the best example, where we should use SSR over CSR?

[@jherr]

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.

[@boot-strapper]

curious if you can give insight into the SEO difference between the two. To me, it seems with code splitting SPA is superior because you can use s3. The only hangup is SEO. But I've heard SEO for SPAs works fine now. Do you have any insight here?

[@jherr]

SEO for SPAs have worked fine for years.

[@boot-strapper]

@@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?

[@jherr]

@@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.

[@lamme4049]

Great video

[@AmitErandole]

@Jack one more question: does the decision to statically render or render client side only take place at the top page level? Or can I do it at the component level as well? Can I have a dashboard page which has the shell (sidebar and navbar) statically rendered and the components in the content area rendered client side via api? I have a feeling the answer is no :(

[@jherr]

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: kzbin.info/www/bejne/qprKqKyBarCbmc0

[@iliketocode6986]

what was the req? filter ive never seen that. Ive seen regex but the way you used it on api confused me

[@jherr]

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.)

[@iliketocode6986]

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

[@makkusu3866]

finally someone explained this shit to me

[@pantanom18]

nicely explained

[@happygurha5062]

how can i combine server side rendering with static site generations

[@jherr]

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.

[@lararawf6100]

God bless u

[@william3588]

Amazing!

[@jonasgroendahl]

Any idea how to access dynamic routes directly if we export the app to static html and host on, say AWS S3?

[@jherr]

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

[@jonasgroendahl]

@@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

[@jherr]

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

[@alexkey9372]

so SSG is pretty much like gatsby on nextjs?

[@jherr]

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

[@alexkey9372]

@@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 +

[@jherr]

@@alexkey9372 it's an amazing framework.

[@alexkey9372]

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

[@alexkey9372]

@@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?

[@william3588]

what does nextjs uses as default? csr ssr or ssg?

[@jherr]

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.

[@tiagoagm]

Can we have all three in one site?

[@jherr]

Yep.

[@pjf7044]

Is nuxt better than nextjs?

[@jherr]

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

[@bedboy3212]

cool

[@zarghamkhan7948]

how come ssg is used with cms when it already creates files at build time, i am so dumb to make any sense out of it.

[@jherr]

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).

[@zarghamkhan7948]

@@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

[@jherr]

@@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.

[@ThomazMartinez]

Can you make a video on fixing the build process or improving this for SSG

[@nchecker00]

Can we protect ssg pages?

[@jherr]

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!

[@nchecker00]

@@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.

[@jherr]

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

[@nchecker00]

@@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).

[@jherr]

@@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.

[@sithiss1]

Great video, thx. What about const pokemon = pokemons.find(...) rather than const pokemon = pokemons.filter(...) [0] ?

[@jherr]

Yep, absolutely. Good call.

[@amirtorabi3978]

Hi, I’d like to express my gratitude for your amazing contents , I would be much appreciated to create some contents in vue js

[@iliketocode6986]

POKEMON!!!! mooar

[@thoriqadillah7780]

Your face is just looks like Homelander from The Boys

[@bioshed]

This was way too fast for me.

[@iliketocode6986]

231 likes 1 misclick