Server Side Rendering & Static Site Generation

6.26.22

In light of the previous post, I rebuilt this site from scratch using all of the technologies I mentioned. Next.js, Tailwind CSS and Strapi. I am actually typing this from the Strapi CMS. I want to talk about Server Side Rendering (SSR) and Static Site Generation (SSG) in this post because developing with SSR and SSG in React is different than developing a traditional React front-end. SSR and SSG are also part of what make Next.js so awesome.

First a little about this site. I split the project into two repositories, the main Next.js project and the Strapi backend. The tech stacks ended up being pretty cool too. First of all they are both Node.js applications. The Strapi backend is deployed continuously to Heroku through the GitHub repo, it is using a PostgreSQL database for these blog posts, and Cloudinary for all of the images. The Next.js repo deploys continuously to Vercel, I am obviously using React because Next.js is a React framework, I already mentioned Tailwind CSS (my favorite new tech), and I ended up using some of the back-end magic of Next.js to create some serverless functions to integrate SendGrid for sending emails (how the contact form works) and connecting to the MailChimp API for the newsletter sign up form.

As I have mentioned in previous posts, a traditional React front-end involves manipulating the virtual DOM which makes it client side (in the browser). In web development, having all your code be client side is usually not ideal. SEO is a huge reason it is not ideal. If all of your important content involves manipulating virtual elements of a web page, search engine crawlers won’t be able to read your content. To put it simply, nobody will be able to google you or find your content. Which is a big deal to a lot of businesses. So, Next.js comes in and solves this by making it easy to export React components as actual HTML pages rendered server side. Which means your React code is crawlable. That really rules. The possibilities are endless. Loading content server side is also mainly where coding a traditional React app will differ the most. The content that you want to be delivered server side needs to be there and exist at the time the page loads or the build will fail. And if you are dynamically delivering content via an API to hydrate your page, like this very post, you cannot use typical React methods and hooks like useState and useEffect.

Instead of using the useState and useEffect React hooks, Next.js offers a couple built in APIs to fetch data. The first is a function called getServerSideProps. The way getServerSideProps works is, if you export it on one of the server side rendered pages, it will pre-render the data on each request. This is important because this is where you make your API calls for data that needs to be rendered server side. You then simply pass that data to the main page component as props and then your component has full access to the data. getServerSideProps. The name makes sense. That completely solves the issue of handling dynamic API data server side, however there are some performance sacrifices that are made when using this method. You are sacrificing performance of your application because as your user uses your application they will have to be hitting the server for every request.

This is where Static Site Generation (SSG) can help. Static Site Generation is a technique where you can pre-render an entire page at build time. For my meta reference, when you visited the landing page of this website, this blog post was also built. So, when you navigated to this page, the content did not have to load because it was already there. Pretty cool. This is done using the other built in Next.js data fetching API function, getStaticProps. Code wise, it is nearly identical to getServerSideProps, except when getStaticProps is used you are implementing SSG and the page that you are using it on will be pre-rendered at build time.

It is also worth noting that if you are using SSG and getStaticProps, and dynamic routing (like this page), you need to define a list of paths to be statically generated. Next.js provides another API function to use in addition to getStaticProps, which is getStaticPaths.

Again, feel free to check out the source code for this site to see exactly how all of this is done. In the code, I first start with the useState and useEffect hooks, comment them out and then go server side, comment that out and then go SSG and you can see how all the methods work.