Use NextJS server side pre-rendering like a boss!🔥

So you want to get better at pre-rendering your components? You have come to the right place!

The main strengths of NextJS with respect to SSG are pre-rendering, fast builds, and a good dev experience.

Why should I pre-render?

Pre-rendering comes with better user experience, faster page load and better dev experience.

(source: Versailles)

The purpose of pre-rendering is to paint over the macro components of your page. We are interested in inserting buttons, menus and sections with or without content.

The second step is to get the data from the API or CMS via getStaticProps (you can use Strapi, Contentful, Sanity etc.).

Keep in mind, at the micro level, we want to nest our data inside macro components without canceling pre-rendering, if we compare using the front-end React hooks that the browser requires, we The pre-rendering feature will be deprecated and we’ll build the component at runtime on the user’s browser.

Reduce browser dependency only react hooks.

If you have components that require browser attributes, you will need to add complex logic if the component fails to pre-render. In some cases, it’s a good thing to analyze if you really need that hook. This usage also applies to effect logic.

What should I pre-render if the component is client only?

For a good user experience, you have two options: loading or skeleton components. The Skeleton component has been researched as a better candidate because it deceives your mind that the component is rendering faster.

What should we pre-render if we have complex desktop, tablet and mobile page components?

You can use nextJS middleware and check user-agent:

  • We will filter using User-Agent request and we will match screen layout with our page.

For example, you can have a mobile page, a desktop page, and a tablet page (eg homepage-mobile.tsx, homepage-desktop.tsx). You will select the required page and change the response accordingly.

How to check how your page is pre-rendered?

Build your project and disable JavaScript on your page. You will see how the page renders with the pre-rendering feature enabled first.

Leave a Comment