Merge pull request #11586 from remix-run/brooks/v7-start-doc-updates

docs: small updates to v7 start doc

Author: brookslybrand

docs/start/data-loading.md

@@ -5,11 +5,11 @@ order: 5
 
 # Data Loading
 
-Data is provided to routes from `loader` and `clientLoader`, accessed in the `data` prop of the Route Component.
+Data is provided to the route via `loader` and `clientLoader`, and accessed in the `data` prop of the Route Component.
 
 ## Client Data Loading
 
-`clientLoader` is used to fetch data on the client. This is useful for projects that aren't server rendering, and for pages you'd prefer to fetch in the browser.
+`clientLoader` is used to fetch data on the client. This is useful for projects that aren't server rendering, and for pages you'd prefer fetch their data in the browser.
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
@@ -37,11 +37,10 @@ export default defineRoute$({
 
 ## Server Data Loading
 
-When server rendering, the `loader` export is used to fetch data on the server for both initial page loads and client navigations through an automatic `fetch` by React Router in the browser.
+When server rendering, the `loader` method is used to fetch data on the server for both initial page loads and client navigations through an automatic `fetch` by React Router in the browser.
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-
 import { defineRoute$ } from "react-router";
 import { fakeDb } from "../db";
 
@@ -71,11 +70,14 @@ Note that the `loader` function is removed from client bundles so you can use se
 RSC is supported by returning components from loaders and actions.
 
 ```tsx filename=app/product.tsx
+// route("products/:pid", "./product.tsx");
 import { defineRoute$ } from "react-router";
 import Product from "./product";
 import Reviews from "./reviews";
 
 export default defineRoute$({
+  params: ["pid"],
+
   async loader({ params }) {
     return {
       product: <Product id={params.pid} />,
@@ -96,13 +98,15 @@ export default defineRoute$({
 
 ## Static Data Loading
 
-When pre-rendering, the `loader` export is used to fetch data at build time.
+When pre-rendering, the `loader` method is used to fetch data at build time.
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
 import { defineRoute$ } from "react-router";
 
 export default defineRoute$({
+  params: ["pid"],
+
   async loader({ params }) {
     let product = await getProductFromCSVFile(params.pid);
     return { product };
@@ -147,7 +151,6 @@ Note that when server rendering, any URLs that aren't pre-rendered will be serve
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-
 import { defineRoute$ } from "react-router";
 import { fakeDb } from "../db";
 

docs/start/deploying.md

@@ -8,8 +8,8 @@ new: true
 
 React Router can be deployed two ways:
 
-- Static Hosting
 - Fullstack Hosting
+- Static Hosting
 
 To get the most benefits from React and React Router, we recommend fullstack hosting.
 
@@ -96,8 +96,6 @@ This template includes:
 - Optimized Image Transforms with `<Image/>` and Vercel images
 - ISR for statically pre-rendered routes
 
-</div>
-
 [View it live →](#TODO)
 
 ### Manual Fullstack Deployment
@@ -120,7 +118,7 @@ You can get started with the following Deploy Now buttons:
 
 ### Manual Static Hosting
 
-Ensure the `ssr` flag is not `true` in your Vite config:
+Ensure the `ssr` flag is `false` in your Vite config:
 
 ```ts
 import react from "@react-router/dev/vite";

docs/start/rendering.md

@@ -13,7 +13,7 @@ There are three rendering strategies in React Router:
 
 All routes are always client side rendered as the user navigates around the app. However, you can control server rendering and static pre-rendering with the `ssr` and `prerender` options in the Vite plugin.
 
-## Server Rendering
+## Server Side Rendering
 
 ```ts filename=vite.config.ts
 import { plugin as app } from "@react-router/vite";
@@ -28,7 +28,7 @@ export default defineConfig({
 });
 ```
 
-Server rendering requires a deployment that supports it. Though it's a global setting, individual routes can still be statically pre-rendered, and/or use client data loading with `clientLoader` to avoid server rendering/fetching of their portion of the UI.
+Server side rendering requires a deployment that supports it. Though it's a global setting, individual routes can still be statically pre-rendered, and/or use client data loading with `clientLoader` to avoid server rendering/fetching of their portion of the UI.
 
 ## Static Pre-rendering
 
@@ -47,17 +47,28 @@ export default defineConfig({
 });
 ```
 
-Pre-rendering is a build-time operation that generates static HTML and client navigation data payloads for a list of URLs. This is useful for SEO and performance especially for deployments without server rendering.
+Pre-rendering is a build-time operation that generates static HTML and client navigation data payloads for a list of URLs. This is useful for SEO and performance, especially for deployments without server rendering. When pre-rendering, the `loader` method is used to fetch data at build time.
 
 ## React Server Components
 
 You can return elements from loaders and actions to keep them out of browser bundles.
 
 ```tsx
-export async function loader() {
-  return {
-    products: <Products />,
-    reviews: <Reviews />,
-  };
-}
+export default defineRoute$({
+  async loader() {
+    return {
+      products: <Products />,
+      reviews: <Reviews />,
+    };
+  },
+
+  Component({ data }) {
+    return (
+      <div>
+        {data.products}
+        {data.reviews}
+      </div>
+    );
+  },
+});
 ```

docs/start/routing.md

@@ -83,9 +83,9 @@ route("dashboard", "./dashboard.tsx", () => [
 ```
 
 ```tsx filename=app/dashboard.tsx
-import { createRoute, Outlet } from "react-router";
+import { defineRoute$, Outlet } from "react-router";
 
-export default createRoute({
+export default defineRoute$({
   component: function Dashboard() {
     return (
       <div>
@@ -151,9 +151,9 @@ route("teams/:teamId", "./team.tsx");
 ```
 
 ```tsx filename=app/team.tsx
-import { createRoute } from "react-router";
+import { defineRoute$ } from "react-router";
 
-export default createRoute({
+export default defineRoute$({
   // ensures this route is configured correctly in routes.ts
   // and provides type hints for the rest of this route
   params: ["teamId"],
@@ -179,7 +179,7 @@ route("c/:categoryId/p/:productId", "./product.tsx");
 ```
 
 ```tsx filename=app/product.tsx
-export default createRoute({
+export default defineRoute$({
   params: ["categoryId", "productId"],
 
   async loader({ params }) {