Server Side Rendering

Explanation

Server Side Rendering does a translation to be able to host the code on the server/hosting platform then at request time, it will use getServerSideProps to hit a database or data source (API) to generate the content at request time

getServerSideProps() Explanation

This functions runs on every request to the page.

Server side rendering is particularly useful when you need to fetch data that changes frequently or is personalized for each request. For example:

  • Constantly Changing Data: Your page needs to display data that is constantly changing, such as stock prices, weather data, or the latest news articles.
  • Live Sports Page A live sports score page where the latest scores are fetched each time the page is loaded.

Main Purpose

getServerSideProps is for initial data fetching during page load or navigation.

Console.logs and Debugging

You wont see any console.logs from the getServerSide props function in the browser.

If you check your console.log from the developer tools, you will not find anything! That is because those console.logs will appear in the VS Code terminal.

Testing with API data

Here is an example using getServerSideProps with useEffect() to make a form submission

Since data is already loaded, there is no flickering. Compare this to the client-side-fetching route

Create a new post test

List of Posts

  • Post 0

    Title:

    sunt aut facere repellat provident occaecati excepturi optio reprehenderit

    Body:

    Creating a visually appealing and informative tutorial can be a rewarding experience. By carefully planning your content, choosing the right tools, and capturing high-quality images or videos, you can effectively guide viewers through a process. Remember to keep your explanations clear and concise, and use a conversational tone to engage your audience.

  • Post 1

    Title:

    qui est esse

    Body:

    est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla

  • Post 2

    Title:

    ea molestias quasi exercitationem repellat qui ipsa sit aut

    Body:

    et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut