next-rsc-demo
entr
next-rsc-demo | entr | |
---|---|---|
4 | 47 | |
505 | 4,062 | |
- | - | |
6.2 | 6.8 | |
over 2 years ago | about 2 months ago | |
JavaScript | C | |
- | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
next-rsc-demo
-
React Server Components in Next.js 12
For this tutorial, rather than creating a project from scratch, I’ll be using the Hacker News project created by Vercel to explain how RSC are used in Next.js 12. Repository here.
- React Server Components and Remix
-
How to create React Server Components functionality with SSR or SSG?
Hey! You can view the code here: https://github.com/vercel/next-rsc-demo
-
Next.js 12
From my understanding from watching the keynote earlier today, the reason that demo has JS is that repo opted in to have client side code to handle the upvote functionality. If it didn't require that interactivity it could be shipped with no client side JS. The client side js code is defined in the component files ending in .client.js
https://github.com/vercel/next-rsc-demo/tree/main/components
entr
- Entr – tool for watching files and running commands
-
Meet entr, the standalone file watcher
entr ("Event Notify Test Runner"; GitHub), is a command-line tool written by Eric Radman that allows running arbitrary commands whenever files change.
-
How to build a website without frameworks and tons of libraries
I use something very similar on https://lunar.fyi and https://lowtechguys.com but I wouldn’t call this “simple” anymore.
They use Jinja templating, I prefer Slim (https://github.com/slim-template/slim#syntax-example) which has a more Pythonic syntax (there is plim [0] in Python for that)
I use Tailwind as well for terse styling and fast experimentation (allows me to write a darkMode-aware and responsive 100 line CSS in a single line with about 10 classes)
For interaction I can write CoffeeScript directly in the page [1] and have it compiled by plim.
I run a Caddy static server [2] and use Syncthing [3] to have every file save deployed instantly to my Hetzner server.
I use entr [4] and livereloadx [5] to rebuild the pages and do hot reload on file save. All the commands are managed in a simple Makefile [6]
———
You can already see how the footnotes take up a large chunk of this comment, this is not my idea of simple. Sure, the end result is readable static HTML and I never have to fight obscure React errors, but it’s a high effort setup for starters.
Simple for me would be: write markdown files for pages, a simple CSS for general styling (should be optional), click to deploy on my domain. Images should automatically be resized to multiple sizes and optimized, videos re-encoded for smaller filesize etc.
I have mostly implemented that for myself (https://notes.alinpanaitiu.com/How%20I%20write%20this%20blog...) but it feels fragile. I’d rather pay for a professional solution.
[0] https://plim.readthedocs.io/en/latest/
[1] https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...
[2] https://caddyserver.com/docs/command-line#caddy-file-server
[3] https://syncthing.net
[4] https://github.com/eradman/entr
[5] https://nitoyon.github.io/livereloadx/
[6] https://github.com/FuzzyIdeas/lowtechguys/blob/main/Makefile
- How to start a Go project in 2023
-
[Guide] A Tour Through the Python Framework Galaxy: Discovering the Stars
Try entr for fast reloading. Another one is hupper.
- Use entr when working on you rice for auto config refreshing
- The Unix process API is unreliable and unsafe
- How do you develop cloud-native applications locally on Kubernetes?
-
What are the not-so-obvious tools that you don't want to miss?
entr
- Test driven development is adhd dream
What are some alternatives?
vike - 🔨 Flexible, lean, robust, community-driven, fast Vite-based frontend framework.
watchexec - Executes commands in response to file modifications
Next.js - The React Framework
nextjs-tailwind-ionic-capacitor-starter - A starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, React w/ Next.js, Ionic Framework, and Capacitor
modd - A flexible developer tool that runs processes and responds to filesystem changes
swc-node - Faster ts-node without typecheck
supabase - The open source Firebase alternative.
air - ☁️ Live reload for Go apps
esbuild - An extremely fast bundler for the web
vim-test - Run your tests at the speed of thought