Skip to content

NOTES.md

Latest commit

 

History

History
79 lines (68 loc) · 2.22 KB

NOTES.md

File metadata and controls

79 lines (68 loc) · 2.22 KB

Reactus Notes

So basically, I want to use React as a template engine. I want to use a server framework like ExpressJS to do the routing. All page requests, go through express first, then an express route decides which React template to use. An express route can pass server props to the React template. React templates should still have reactivity like states and hooks. Express (dev) should provide HMR capabilities.

Vite Notes

  • Vite uses file routing like NextJS except with .html files ….
    • html files needs to be relative to the root
    • html files can however import tsx files
    • these tsx files are entry files not app files…
    • At first I just wanted page.tsx, but, I’m open to page.html for flexibility
  • Vite build is relative to the root folder.
    • You can not path to parent files
    • You cannot path to node modules
    • You cannot path to absolute paths
  • HMR is really good with Vite
    • I found a way to customize it
    • I have not found a way to pass the source (tsx) data to the dev server without writing to disk first

Strategy

These should be generated by Reactus

Server entry point for React (for ssr)

import React from 'react';
import { renderToString } from 'react-dom/server';
const props = {};
export function render(_url: string) {
  return renderToString(
    <React.StrictMode>
      <HomePage {...props} />
    <React./StrictMode>,
  );
  return { html };
}

Client entry point for React (for ssr)

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
const root = document.getElementById('root');
const data = document.getElementById('props');
const props = JSON.parse(data?.innerText || '{}');
await hydrateRoot(
  root as HTMLElement, 
  <React.StrictMode>
    <HomePage {...props} />
  </React.StrictMode>
);

HTML Document

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--document-head-->
  </head>
  <body>
    <div id="root"><!--document-body--></div>
    <script id="props" type="text/json"><!--document-props--></script>
    <script type="module" src="<!--document-client-->"></script>
  </body>
</html>