Document server rendering API changes

Author: satya164

versioned_docs/version-8.x/configuring-links.md

@@ -998,8 +998,6 @@ function NotFoundScreen({ route }) {
 }
 ```
 
-When doing server rendering, you'd also want to return correct status code for 404 errors. See [server rendering docs](server-rendering.md#handling-404-or-other-status-codes) for a guide on how to handle it.
-
 ## Rendering an initial route
 
 Sometimes you want to ensure that a certain screen will always be present as the first screen in the navigator's state. You can use the `initialRouteName` property to specify the screen to use for the initial screen.

versioned_docs/version-8.x/server-container.md

@@ -9,68 +9,61 @@ The `ServerContainer` component provides utilities to render your app on server
 Example:
 
 ```js
-// Ref which will be populated with the screen options
-const ref = React.createRef();
+import { ServerContainer } from '@react-navigation/native/server';
+import { renderToPipeableStream } from 'react-dom/server';
 
-// Location object - can be a URL object or an object with `pathname` and `search` fields
+// Location object for the incoming request
 const location = new URL('/profile?user=jane', 'https://example.org/');
 
-// Get rendered HTML
-const html = ReactDOMServer.renderToString(
-  <ServerContainer ref={ref} location={location}>
+const { pipe } = renderToPipeableStream(
+  <ServerContainer location={location}>
     <App />
-  </ServerContainer>
+  </ServerContainer>,
+  {
+    onShellReady() {
+      response.statusCode = 200;
+      response.setHeader('Content-Type', 'text/html');
+      pipe(response);
+    },
+  }
 );
-
-// Then you can access the options for the current screen in the ref
-const options = ref.current?.getCurrentOptions(); // { title: 'My Profile' }
 ```
 
 The `ServerContainer` component should wrap your entire app during server rendering. Note that you still need a `NavigationContainer` in your app, `ServerContainer` doesn't replace it.
 
 See the [`server rendering guide`](server-rendering.md) for a detailed guide and examples.
 
-## Ref
-
-If you attach a `ref` to the container, you can get the options for the current screen after rendering the app. The `ref` will contain a method called `getCurrentOptions` which will return an object with options for the focused screen in the navigation tree:
-
-```js
-const options = ref.current.getCurrentOptions();
-```
-
-Then you can access the options for the screen from this object and put it in the HTML:
-
-```jsx
-<title>{options.title}</title>
-<meta name="description" content={options.description} />
-```
-
-Note that the `options` object can be undefined if you are not rendering a navigator on the initial render.
-
 ## Props
 
 ### `location`
 
-Location object containing the location to use for server rendered output. You can pass the `pathname` and `search` properties matching the `location` object in the browsers:
+`URL` object containing the location to use for server rendered output:
 
 ```js
-<ServerContainer location={{ pathname: '/profile', search: '' }}>
+<ServerContainer location={new URL('/profile', 'https://example.org/')}>
   <App />
 </ServerContainer>
 ```
 
 Normally, you'd construct this object based on the incoming request.
 
-Basic example with Koa (don't use as is in production):
+Basic example with a Node server:
 
 ```js
-app.use(async (ctx) => {
-  const html = ReactDOMServer.renderToString(
-    <ServerContainer location={{ pathname: ctx.path, search: ctx.search }}>
+function handler(request, response) {
+  const location = new URL(request.url, 'https://example.org/');
+
+  const { pipe } = renderToPipeableStream(
+    <ServerContainer location={location}>
       <App />
-    </ServerContainer>
+    </ServerContainer>,
+    {
+      onShellReady() {
+        response.statusCode = 200;
+        response.setHeader('Content-Type', 'text/html');
+        pipe(response);
+      },
+    }
   );
-
-  ctx.body = html;
-});
+}
 ```