Introduction to Static Site Generation SSG
Static Site Generation SSG is the process of converting an application into plain HTML at build time. You don't always need large frameworks like Next.js, Gatsby, or Astro. Sometimes it's enough to take a React component, render it to HTML during the build, and deploy it.
Benefits
Faster performance because the HTML is ready before the user arrives. Improved SEO because search engines easily index HTML.
Example summary
We build a minimal SSG in less than 40 lines of JavaScript using only React and Node.js. Without JSX or a bundler, we use createElement as the foundation.
Prerequisites
Node.js 18 or higher, with react and react-dom installed.
Suggested file structure
ssg folder with App.js, index.html, build.js, package.json
App.js
Define a functional component that returns the desired structure using createElement if there is no JSX compilation step. This avoids depending on a bundler.
Index.html
HTML template with a Root marker where the generated HTML will be inserted during compilation. The build replaces that marker with the static HTML.
Package.json
Configure type module and a build script that runs node build.js, and add react and react-dom dependencies.
Build.js
The script imports createElement from react and renderToStaticMarkup from react-dom/server. It renders the component as a React element using h(App) and converts the result to a plain HTML string. It reads the index.html template, replaces the Root marker, and writes the final HTML into a dist folder, creating the folder if necessary and cleaning up old files.
Why use h(App) instead of calling App()?
h(App) creates a React element equivalent to placing a component in JSX. Calling App directly executes the function and bypasses React features like hooks. That's why hooks like useState or useEffect will fail if the function is called directly.
What does renderToStaticMarkup do?
renderToStaticMarkup takes a React element and returns a clean, pure HTML string. Unlike renderToString, it does not include React attributes for client-side hydration.
How to get filename and dirname in ES Modules
In ES Modules, the global variables filename and dirname do not exist. We can reconstruct them using import.meta.url and the fileURLToPath and dirname functions from the path module. This allows reading the template and creating the dist folder regardless of the working directory.
Suggested next steps
Add multiple pages from data sources. Parse Markdown for blogs. Integrate styles with CSS or Tailwind, and add client-side hydration for interactivity.
About Q2BSTUDIO
Q2BSTUDIO is a custom software and application development company specializing in artificial intelligence and cybersecurity. We offer cloud services for AWS and Azure, business intelligence services, AI agent implementation, and Power BI solutions for visualization and analytics. Our team develops custom software and custom applications focused on scalable and secure results.
Keywords to improve positioning
custom applications, custom software, artificial intelligence, cybersecurity, AWS and Azure cloud services, business intelligence services, AI for businesses, AI agents, Power BI
Contact us
If you want us to help you build a custom SSG or a complete architecture with AI and security, contact Q2BSTUDIO for a tailored proposal.
