CODEWITHSUNDEEP
javascriptreactjsnext.js
buzz
buzz

Reputation: 302

What's the most practical way to render dynamic components in Next.js?

I'm new to Next.js and converting my old react application to a Next app to take advantage of SSR for SEO (among other nifty features Next provides). Currently my component setup is:

HomePage

As I understand I cannot make fetch calls in the getServerSideProps function and I wish not to bloat my Homepage with a lot of code.

I'm leaning towards Incremental Static Regeneration as the homepage components do not need to be updated quickly. However if I understand correctly, I'll need to make a call by refreshing to update the stale data (a hassle I wish to avoid).

Can I make all my fetch calls in getServerSideProps and pass them to my components? And if so, is this bad practice/ solution to my problem?

Upvotes: 0

Views: 2316

Answers (1)

Sean W
Sean W

Reputation: 6608

Since you have infrequent builds and low amount of pages you can use any of the three build types that Next.js offers.

If you use Vercel's hosting, it's really up to you as they handle the deployment. If you're not using them, it is likely not worth the effort to setup ISR or SSR at your current stage.

Here is the Next.js recommendations when fetching data. This page also contains a lot of setups with CMS's.

Static site generation (SSG)

SSG is probably the most basic of the solutions and is likely most similar to how a basic vanilla React app is deployed.

Since you have a few pages and infrequent builds this is a great solution (it's the one I'd use - but I primarily use AWS). A SSG site will build in a 1-2 minutes and you can automate the process with something like GitHub Actions. Here is a easy to follow video using SSG, GitHub Actions, and AWS.

Incremental static regeneration (ISR).

Slightly more involved setup but this approach would be faster rebuilds with the same benefits as SSG. Here is a good article on this approach.

Server-side Rendering (SSR)

Building a server-side app using getServerSide props is a perfectly viable solution. This approach will also allow you to use all of Next's features like Image that is currently not available on the other approaches.

Upvotes: 1

Related Questions