dan gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

	import { useState, useEffect, useRef, useMemo } from 'react'

	export default function Wordle() {
	let [currentAttempt, setCurrentAttempt] = useState('')
	let [bestColors, setBestColors] = useState(() => new Map())
	let [history, setHistory] = usePersistedHistory(h => {
	waitForAnimation(h)
	})

	useEffect(() => {

	<div id="screen">
	<h1>Wordle</h1>
	<div id="grid"></div>
	<div id="keyboard"></div>
	</div>
	<style>
	body, html {
	background: #111;
	color: white;
	font-family: sans-serif;

	<h1>Wordle</h1>
	<div id="grid"></div>
	<style>
	body, html {
	background: #111;
	color: white;
	font-family: sans-serif;
	text-align: center;
	text-transform: uppercase;
	}

	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<div id="canvas"></div>
	<button id="restart">Restart</button>
	<script src="minesweeper.js"></script>
	<style>
	* {

	<div id="canvas"></div>
	<style>
	#canvas {
	width: 500px;
	height: 300px;
	border: 5px solid black;
	position: relative;
	box-sizing: content-box;
	}

	// from/to: { left, top, width, height, shape: 'circle' \| 'rect' }
	function CurvedArrow({ from, to }) {
	function curvedHorizontal(x1, y1, x2, y2) {
	function pos(t) {
	let mx = x1 + (x2 - x1) / 2;
	let p1 = {x: x1, y: y1};
	let p2 = {x: mx, y: y1};
	let p3 = {x: mx, y: y2};
	let p4 = {x: x2, y: y2};
	return {

	class Spiderman {
	lookOut() {
	alert('My Spider-Sense is tingling.');
	}
	}

	let miles = new Spiderman();
	miles.lookOut();

	const express = require('express');
	const app = express();

	// Application
	app.get('/', function(req, res) {
	if (process.env.NODE_ENV === 'development') {
	for (var key in require.cache) {
	delete require.cache[key];
	}
	}