https://github.com/jaredpalmer/razzle-unrouted

Blazingly fast server-rendered MVC Webapps with Preact and Webpack
https://github.com/jaredpalmer/razzle-unrouted

mvc preact react server-rendering

Last synced: 3 days ago
JSON representation

Blazingly fast server-rendered MVC Webapps with Preact and Webpack

• Host: GitHub
• URL: https://github.com/jaredpalmer/razzle-unrouted
• Owner: jaredpalmer
• Created: 2018-02-04T16:47:53.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-10T16:04:11.000Z (over 6 years ago)
• Last Synced: 2024-11-28T20:23:08.137Z (15 days ago)
• Topics: mvc, preact, react, server-rendering
• Language: JavaScript
• Homepage:
• Size: 90.8 KB
• Stars: 42
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-blazingly-fast - razzle-unrouted - Blazingly fast server-rendered MVC Webapps with Preact and Webpack (JavaScript)

README

        
# Razzle Unrouted

Sometimes, you don't want to build an SPA.

## The Problem with Single Page Applications...

They take a while. For a single view you need to write an API endpoint and then write the data fetch on the client. In contrast, with a good ol' web app, like a 2007-style web app, you just get the data and pass it to your template. memba?

## Speaking of templates...

Templates suck. Components kick ass. As it turns out, React is a great templating language. However, in prior projects like express-engine and express-react-views, they required completely separate client-side JavaScript. What does that mean? Well you'd get to use React for templating, but then would need to sprinkle client-side JavaScript wherever you still needed it. For example, modals and buttons and other stuff wouldn't work, because that code was never going to be run in the browser.

## The Solution

This is an example of how to solve this problem. Using Razzle, this project shows how **you could use Preact as a templating language for Express, but then also reuse the same components on the client (without the need for client-side routing)**. It works by creating a webpack entry for each component in the views directory and using express middleware to inject props.

## Differences from other (p)React apps

* There is no client-side "router." You just use vanilla `` tags

* You'll need to handle CSRF

* You'll need cookies and sessions for authentication

* Data is fetched in express controllers (for now)

* You can ship your idea 2-3x faster than you would with an SPA.