So in NextJs there are multiple ways of fetching the data.
- Client side fetching (CSR)
- Server side fetching (SSR)
Client side fetching is the traditional way of fetching the data in ReactJS in useEffect or componentDidMount. In NextJs we can make traditional apps like we do in ReactJS (CRA) without using any special server methods. That gives us the power to choose which type of application we want to develop.
Server side fetching is used where we want the data to be present before the browser compiles the JS files of our project. This helps SEO for google. In NextJs there are three special methods which we will go through in details
- getServerSideProps (Server-side Rendering)
- getStaticProps (Static generation)
- getStaticPaths (Static generation)
getServerSideProps is a method which is executed on server (nodejs) before a page is rendered. If there is an API request for a page then every time when a user visits the page this method is executed. Since this method runs on a server then we can write server code here. i.e If on page there is a list of items to be fetched from server we can either make an API call to server or we can also write the Db query to access the data (Not recommended). Following are the use cases which I personally use this method for.
Also Read, Stateless Functional Components in React
- If a page require some Auth related logic i.e Authentication, Refresh token, Redirection
- Some Backend service is required to be executed before Page is rendered.
getStaticProps is a method which is executed at build time. So when the project is built this method is executed and data is fetched and saved in html file. When a user accesses a page then the data is available and the page is rendered instantly. here are following use cases
- Fetching blog data or data from CMS
- SEO related data that need to be fetched and present at build time
getStaticPaths is a method used alongside getStaticProps. For dynamic routes getStaticProps wont work and you will need to use getStaticPaths. Use cases are following
- Get single blog pages data available at build time for better SEO
- For dynamic routes fetch the data at built time for SEO purposes.
so how it works is we fetch all the paths of dynamic routes in getStaticPaths and return paths. For all those paths the getStaticProps will be executed and hence the data will be available at build time. I will have a dedicated blog for static generation in NextJs in near future.
Conclusion
NextJS gives a lot of flexibility in how you want your application to be developed. It can be SSR or hybrid to achieve the power of server and browser. It's up to us how we architecture.
