Elaborate on renderToString without hydration (fixes #61)

Author: lostfictions

README.md

@@ -171,7 +171,30 @@ Hopefully this makes sense, since in order to work, imports must be relative to
 
 This library evaluates a string of JavaScript on the client side, which is how it hydrates the MDX content. Evaluating a string into javascript can be a dangerous practice if not done carefully, as it can enable XSS attacks. It's important to make sure that you are only passing the `mdxSource` input generated by the `render-to-string` function to `hydrate`, as instructed in the documentation. **Do not pass user input into `hydrate`.**
 
-If you have a CSP on your website that disallows code evaluation via `eval` or `new Function()`, you will need to loosen that restriction in order to utilize the `hydrate` function, which can be done using [`unsafe-eval`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#common_sources). It's also worth noting that you do not _have_ to use `hydrate` on the client side, but without it, you will get a server-rendered result, meaning no ability to react to user input, etc.
+If you have a CSP on your website that disallows code evaluation via `eval` or `new Function()`, you will need to loosen that restriction in order to utilize the `hydrate` function, which can be done using [`unsafe-eval`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#common_sources).
+
+### Usage Without Hydration
+
+It's also worth noting that you do not _have_ to use `hydrate` on the client side — but without it, you will get a server-rendered result, meaning no ability to react to user input, etc. To do this, pass the `renderedOutput` prop of the object returned by `renderToString` to [`dangerouslySetInnerHTML`](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml):
+
+```jsx
+import renderToString from 'next-mdx-remote/render-to-string'
+
+import Test from '../components/test'
+
+const components = { Test }
+
+export default function TestPage({ renderedOutput }) {
+  return <div className="wrapper" dangerouslySetInnerHTML={{ __html: renderedOutput }} />
+}
+
+export async function getStaticProps() {
+  // <Test /> will be rendered to static markup, but will be non-interactive!
+  const source = 'Some **mdx** text, with a component <Test />'
+  const { renderedOutput } = await renderToString(source, { components })
+  return { props: { renderedOutput } }
+}
+```
 
 ## License