Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export const reactExample = () =>
5  new Response(renderToString(<div>Test {1 + 1}</div>), {
6    headers: {

1null
2
3Migrated from folder: examples/reactExample

1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4export const preactExample = () =>
5  new Response(render(<div>Test {1 + 1}</div>), {
6    headers: {

1null
2
3Migrated from folder: examples/preactExample

1null
2
3Migrated from folder: Archive/dateme_react_router_rewrite/dateme_faq_react

1# Starter App for [ssr_react_mini](https://www.val.town/v/stevekrouse/ssr_react_mini)
2
3You need to export four things:
4
51. `loader` - runs on any GET request, on the server. it accepts the `Request` and returns the props of your React compnent.
62. `action`- runs on the server on any non-GET, ie POST, PUT, DELETE, or `<form>`s submit
73. `Component` - your React component. it's initially server-rendered and then client-hydrated
84. `default` - you should mostly leave this line alone
9
10This is framework is bleeding-edge. You'll need to read the [code of the framework itself](https://www.val.town/v/stevekrouse/ssr_react_mini) (it's very short) to understand what it's doing.
11
12If you have questions or comments, please comment below on this val! (or any of these vals)
13
14Migrated from folder: Archive/ssr_react_mini_starter

1/** @jsxImportSource https://esm.sh/preact */
2
3let linkClass = "text-sky-600 hover:text-sky-500";

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export const reactExample = (request: Request) =>
5  new Response(renderToString(<div>Test {1 + 1}</div>), {
6    headers: {

1# SSR React Mini & SQLite Todo App
2
3This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
4
5![demo](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3bbc3a39-9017-4a95-797b-2f205aa57f00/public)
6
7## SSR React Mini Framework
8
9This ["framework"](https://www.val.town/v/stevekrouse/ssr_react_mini) is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.
10
11The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you're [server rendering](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L35-37). Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as [modules](https://esm.town/v/stevekrouse/TodoApp) importable by the browser.
12
13The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side `loader` and `action` with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the [`loader`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L7) and [`action`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L20), so they only run server-side.
14
15

1# Example Full-stack Todo List App with React SSR + Client-side hydration & sqlite
2
3Requires you to put the React component  in another val, in this case: https://www.val.town/v/stevekrouse/TodoApp
4
5Migrated from folder: Archive/TodoListApp/todo_list