CDC Gov Portal

This application is not yet merged with the official CDC Gov Portal. Once at feature parity, the merge will occur as the successor.

This article speaks on a progressive NextJS API-fetch website I developed to further my understanding on NextJS Data Fetching, Server-side Rendering, and Incremental Static Regeneration processes. Let's take a look at how I achieved blazing fast speeds and loading times in comparison to the predecessor.

Predecessor Load / Render speeds View

Successor Load / Render speeds View

// SEE: https://nextjs.org/docs/basic-features/data-fetching/overview
export async function getStaticProps() {
	// TODO: Dynamic instead of static to alleviate maintenance demand.
	const pages = [1, 2, 3, 4, 5];
	const endpoints = pages.map((page) => `https://api.github.com/users/CDCGov/repos?page=${page}&per_page=100`);

	const projects = await Promise.all(endpoints.map((endpoint) => fetch(endpoint).then((res) => res.json())));

	return {
		props: {
			projects: projects.flat(),
		},
		revalidate: 350,
	};

In the code presented above, instant data retrieval and statically generated speeds is achieved by using NextJS Data Fetching techniques. More specifically, as a user requests the website URL, the API is fetched for data, and as the page statically loads the data being fetched is simultaneously displayed within the static elements of the page. This results in a very quick loading waterfall serving live data. "Revalidate" property checks the data on the server and matches it with the client each 350 seconds after a request, to ensure accuracy and up-to-date data feeds.

See more about it

Data Fetching and NextJS Server-side Rendering is a straightforward process to implement into your data-fed applications. Check out the official NextJS Rendering directory to see more!

Here's a brief 6 minute YouTube video to learn a little more about NextJS SSR, and how SSR greatly improves website SEO: Click to watch moving pixels