Please enable JavaScript.
Coggle requires JavaScript to display documents.
Server Side Rendering - Coggle Diagram
Server Side Rendering
Context parameter
params.category
req
res
res.setHeader('Set-Cookie',["name=Pradeep"])
req.headers.cookie
params.query
contains subCategory whereas params doesnt
SSR with getServerSideProps()
export async function getServerSdieProps() {
//fetch logic
return {
props: {
news:data,
}
}
}
getServerSideProps runs only on server side
The function will never run client side
The code that you write inside getServerSideProps will never be included in the JS bundle that is sent to the browser
You can write server side code directly in the getServerSideProps function
Accessing the file system using the fs module or querying the database can be done inside getServerSideProps
You also don't have to worry about including the API keys in the getServerSideProps inside the function as it will not make it to the browser
getServerSideProps is allowed in a page and not regular component file , it is only used for prerendering and not client side data fetching
getServerSideProps will run at request time
Introduction
Two types of Pre-Rendering
Static generation
The HTML is generated at build time and then for each request the cached HTML page will be shown
But there are still exceptions where the getStaticPaths and fallback are set to true and the page is not generated at the build time , instead it is generated on the initial request
With the ISR concept , a page can be regenerated after the elapsed time of revalidation
Server Side rendering
Next JS allows you to pre-render a page at request time and not build time
The HTML is generated for every incoming request
Problems with Static Generation
We cannot fetch data at request time
We don't get access to the incoming request
SSR with Dynamic Parameters
filter news artticles by category
export async function getServerSideProps(context) {
const { params: { category } } = context;
const response = await fetch(
https://localhost:4000/news?category=${category}
);
const data = await response.json();
//
return {
props: {
filteredArticles: data,
category,
}
}
}
Inspecting SSR Builds
files that are generated server side are in Lamda symbol