Dynamically Generate Next.js Pages with Server Side Rendering using getServerSideProps

Server Side Rendering (SSR) will render each page on every request of the user. This means that the server is waiting for the user to request a page before generating the html that will be displayed to that user. This rendering method is great for dynamic data or data that changes often but comes at a cost. Your pages will generate slower than if they we’re using Static Site Generation (SSG).

To user SSR, you’ll just swap out getStaticProps to getServerSideProps on your pages you want to use SSR with. Next.js handles how it renders for you. When you switch these functions out, you’ll also have access to the client query and request as well as the server response. These are great for checking for any cookies or auth that you might need to.