NEXT JS provide us three method for data fetching.
1) Server Side Rendering (SSR)
2) Static Site Generation (SSG)
3) Incremental Static Generation (ISG)
Server Side Rendering (SSR)
Dynamic server render data. It fetch fresh data/content on each request. With SSR each request to server rendering new cycle for data fetching. It ensure always content up-to-date.
Static Site Generation (SSG)
NEXT JS component directly/automatically data using API's and store data in server cache. The data store in cache not frequently change.
Such as blog post, documentations, marketing pages etc.
Incremental Static Generation (ISG)
In ISG we provide additional parameter in api endpoint fetch method as an second parameter.
That is { next: { revalidate: 10 }}
It combine the benefits of SSR and SSG for dynamic and static sites.
But the advantage of ISG is that you can specify certain data to be statically fetch at build time and than fetch dynamically after the revalidate (specified time interval) time.
Note : It much be note data save on server render component in cache and data save in client render components in useState hook. So you have to make sure with component should be server or client render component.
We need to learn and develop full stack capabilities in next js application, For that we need to make sure few thing in out application.
1) Focus on server-less route handler.
2) As we know NEXT JS app allow us to make full stack application because it run on both server/back-end and client/front-end using the same file routing system.
Route Handlers in NEXT JS
There are two ways to define handlers in NEXT JS application.
1) File Based route handlers write within the api folder within the app directory.
2) Second approach is to create direct handler within the app directory itself
Comments
Post a Comment