Frontend Performance60-90 min
SSR vs CSR vs ISR in Next.js
Use static rendering for stable public pages, server rendering for request-specific pages, and client rendering for private interactive areas.
Next.jsReactApp RouterCaching
Prerequisites
- A Next.js app with public and private routes.
- A list of pages that require SEO or fresh data.
- Understanding of which data is user-specific.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm run build
npm run startChecklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Mark public marketing and blog pages as static whenever data can be cached.
- Use revalidation for pages that need periodic freshness.
- Use server rendering for SEO pages that depend on request-time data.
- Use client rendering for highly interactive private widgets after the shell loads.
- Avoid making an entire route dynamic because one small widget needs live data.
Implementation snippet
export const revalidate = 3600;
export default async function BlogPage() {
const posts = await getPosts();
return <PostList posts={posts} />;
}
// For private dashboards, fetch user-specific data after auth checks.4
Handle edge cases
Checklist
- Public SEO pages have meaningful HTML before JavaScript loads.
- Private data is never cached into static output.
- Route caching behavior is documented near the page.
- Build output is reviewed for unexpected dynamic routes.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.