leptos/examples/ssr_modes
Cody Casterline 1eaf886481
Better handling for trailing slashes. (#2154) (#2172)
* retain trailing slashes in paths but leave matching trail-slash-insensitive

* fix: Allow trailing slashes to remain in leptos_path.

* Better handling for trailing slashes. (#2154)

This adds a trailing_slash option to <Router> and <Route>.

By default, this option is backward compatible with current Leptos
behavior, but users can opt into two new modes for handling trailing
slashes.

* cargo fmt

* Fix redirect routes for wildcard patterns.

* Clippy fixies

* (Re)Reduce the scope of PossibleBranchContext's internals.

* Test real code, not copied code.

* Test TrailingSlash redirects.

* Fixes and more tests for matching "" && "/".

This path is the exception to the rule and *should* be treated
as equivalent regardless of its trailing slash.

* cargo fmt

---------

Co-authored-by: Tadas Dailyda <tadas@dailyda.com>
2024-01-11 13:51:31 -08:00
..
assets feature: in-order streaming and async rendering (#496) 2023-02-17 17:31:32 -05:00
src Better handling for trailing slashes. (#2154) (#2172) 2024-01-11 13:51:31 -08:00
style feature: in-order streaming and async rendering (#496) 2023-02-17 17:31:32 -05:00
.gitignore feature: in-order streaming and async rendering (#496) 2023-02-17 17:31:32 -05:00
Cargo.toml change: migrate to nightly and csr features rather than stable and default-features = false (#1227) 2023-06-26 21:12:14 -04:00
LICENSE feature: in-order streaming and async rendering (#496) 2023-02-17 17:31:32 -05:00
Makefile.toml build(examples): make it easier to run examples (#1697) 2023-09-12 10:46:16 -04:00
README.md docs: make it easy to see how to run each example in its README (#2085) 2023-11-28 11:47:56 -05:00
rust-toolchain.toml chore: add rust-toolchain.toml to examples (closes #2151) (#2161) 2024-01-07 15:29:54 -05:00

SSR Modes Example

This example shows the different "rendering modes" that can be used while server-side rendering an application.

Getting Started

See the Examples README for setup and run instructions.

Server-Side Rendering Modes

  1. Synchronous: Serve an HTML shell that includes fallback for any Suspense. Load data on the client, replacing fallback once they're loaded.

    • Pros: App shell appears very quickly: great TTFB (time to first byte).
    • Cons: Resources load relatively slowly; you need to wait for JS + Wasm to load before even making a request.
  2. Out-of-order streaming: Serve an HTML shell that includes fallback for any Suspense. Load data on the server, streaming it down to the client as it resolves, and streaming down HTML for Suspense nodes.

    • Pros: Combines the best of synchronous and async, with a very fast shell and resources that begin loading on the server.
    • Cons: Requires JS for suspended fragments to appear in correct order. Weaker meta tag support when it depends on data that's under suspense (has already streamed down <head>)
  3. In-order streaming: Walk through the tree, returning HTML synchronously as in synchronous rendering and out-of-order streaming until you hit a Suspense. At that point, wait for all its data to load, then render it, then the rest of the tree.

    • Pros: Does not require JS for HTML to appear in correct order.
    • Cons: Loads the shell more slowly than out-of-order streaming or synchronous rendering because it needs to pause at every Suspense. Cannot begin hydration until the entire page has loaded, so earlier pieces of the page will not be interactive until the suspended chunks have loaded.
  4. async: Load all resources on the server. Wait until all data are loaded, and render HTML in one sweep.

    • Pros: Better handling for meta tags (because you know async data even before you render the <head>). Faster complete load than synchronous because async resources begin loading on server.
    • Cons: Slower load time/TTFB: you need to wait for all async resources to load before displaying anything on the client.

Quick Start

Run cargo leptos watch to run this example.