Next.js Server Side Rendering when stateful component

Question

I'm in the process of migrating my site from Create React App to Next.js and I'd like some clarification on how a React component which holds state and has conditionally rendered components is rendered.

On my website, I'm using the react-type-animation package to initially animate the Hero text of my landing page, and only after this text has been rendered the other components become visible/begin their animations. The logic for if the text has finished animating is this:

const [line1Complete, setLine1Complete] = useState(false);
<TypeAnimation
    sequence={[
        `Hi, I'm Jack`,
        () => {
            setLine1Complete((line1Complete) => {
            return !line1Complete;
            });
        },
    ]}
    cursor={false}
    wrapper="div"
    speed={30}
    className={
        "m-0 text-white text-5xl sm:text-6xl md:text-7xl font-bold w-full text-left"
    }
/>

The other components have classNames which conditionally change when line1Complete is set to true.

The main reason for wanting to migrate my website to Next.js is to make use of the Server Side Rendering and improve first contentful/meaningful paint however I'm wondering if this conditional rendering based on state is going to slow down the process. To the best of my understanding, Server Side Rendering works by serving the client all Static HTML for the page first and then the page is hydrated once the React javascript is loaded. Does this mean that once the static HTML is loaded onto the page, the client is going to have to wait for the React bundle to download and execute before the typing animation begins and therefore any other animations on the page?

If this is the case, the render will still be faster as the hidden elements will already have been served to the page but the user doesn't necessarily benefit from this if they can't see the elements.

Any description/useful resources would be appreciated to help me further understand this process.

So you want to make your website faster, but you have an animation that artificially delays showing the content of your website? Did you measure what takes time and what you want to make faster? — Guillaume Brunerie
– Guillaume Brunerie, Commented Nov 21, 2022 at 18:43

evandwight · Accepted Answer · 2022-11-21 18:41:43Z

2

+50

I'm new to nextjs but this is easy to check. NextJs's server side rendering process:

Server render's page to initial html
Client renders the html
Client loads react javascript and connects react to the initial html state (hydrates the html)

It isn't until hydration that javascript functions are attached to html elements so the typing doesn't start until after the javascript is loaded. You can see this by opening dev tools and blocking all javascript. The html loads but nothing is displayed.

If you can make the animation pure css then it happens on html+css load.

https://css-tricks.com/snippets/css/typewriter-effect/

edited Nov 21, 2022 at 18:41

answered Nov 21, 2022 at 18:22

evandwight

1741 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jack Ecuyer Over a year ago

Thanks, this is helpful. Do you know if the JSX HTML elements which will conditionally render after my JavaScript will pre-load or are them creating in the DOM once the react scrips have loaded?

evandwight Over a year ago

No it won't. In dev tools you can see anything that's conditionally rendered - eg {condition && <div>hidden information<div>} - doesn't get put in the initial html payload. Which makes sense because why send data that won't be shown.

Jack Ecuyer Over a year ago

thanks, I suspected this but wanted to make sure so I can optimise as much as possible, enjoy the bounty :)

Collectives™ on Stack Overflow

Next.js Server Side Rendering when stateful component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related