Issue 004: Build your own Next.js
Web Builders Digest — Issue 4
Do you need Next.js just to get SSR working? Maybe there’s another way. Hey! I send out emails like these regularly, so you can join me in my learning journey. Subscribe below! 👇
- vite-plugin-ssr gets you Next-like file system routing and SSR features as a DIY library.
- It offers flexibility that other SSR frameworks don’t.
There’s a lot of frameworks for server-side rendering (SSR), and they’re all highly-opinionated. Sometimes these opinion can clash with what you want. Instead… what if we don’t use a framework?
vite-plugin-ssr is an alternative. It requires a bit more DIY’ing, but it unlocks flexibility that others don’t quite have:
- Use any frontend framework (React, Vue, Svelte, Solid, etc)
- Use as middleware in anything (Express, Fastify, Koa, etc)
- Deploy anywhere, even Cloudflare Workers with its modest 1MB size limit
It’s not a framework. It’s a library that lets you build your own framework. I think this makes for a great playground for experimenting with new tech!
- Functions taking a long time in the browser? Try pausing execution with await and setTimeout.
- It will take longer to run, but it will make the UI feel faster.
I just came across a unique performance optimisation that’s just so obvious: what if we make functions pause every now and then to breathe?
Using async/await makes this very easy. A calling simple function to use
setTimeout(0) will allow other things to run in the background. It’s really counter-intuitive, but pausing work periodically can things feel faster by making UI feel more responsive.
- Wildcard allows building API’s with functions, kind of like RPC.
- It’s less verbose than GraphQL, more expressive than REST.
When building an API, it seems the only choices are GraphQL and Rest. But before there was Rest, it was popular to expose raw, arbitrary functions called remote procedure calls (RPC’s.)
RPC’s don’t require you to to build your data model as objects and resources like GraphQL and Rest do, which might make it a good fit for simpler API’s.
- Use it to write your own custom lint rules.
I recall seeing places like Facebook have custom linters for their code which can validate business logic—for example, enforcing the use of design tokens for building UI’s.
- Write Lua scripts using TypeScript.
- Lua is used in Neovim, Hammerspoon, and even games like WOW and Dota.
map() don’t have native equivalents in Lua.
I just found we can now write Lua scripts as TypeScript! TypeScriptToLua is a compiler that can do exactly what its name says it can do.