NextJS to the rescue of Single Page React apps' SEO problems

If you love building dynamic web apps/sites with ReactJS and similar technologies, you would have definitely come across these issues:

• Slow initial page load because a whole JavaScript file containing your code has to be downloaded the first time you open the webpage before being rendered by the browser.
• Search Engine Optimization (SEO) of single page web apps. Search engines are getting better at executing and getting content out of the single JavaScript file but this is currently not guaranteed and search engines still prefer to be given direct HTML content.

If you enjoy building web apps with React but faces the issues discussed above, then Nextjs is here to your rescue.

Nextjs renders your pages on the server and sends the html together with any context data needed to fully rerender the page on the client side. All subsequent React state changes that causes a rerender happens only on the client side. So the initial pages request returns a full HTML page instead of  JavaScript file that the browser must interpret.

The second cool feature of Nextjs that I will discuss is  it's automatic code splitting. When you build a nextjs app/site, each page of the site is split and made independent by bundling with it all it's dependencies. This makes it possible to run each page as a lambda function.  All pages without getInitialProps, which is used to get initial data on the server before the initial page render and set as props for subsequent page renderings, can be prebuilt into a static html page that can be hosted on s3. This therefore removes the need for compute resources for rendering.

NextJS also makes it very easy to serve static files such as images by just placing them in a directory named public in the project's root directory.