Process Markdown on the Server Using a Remix Loader
We’d like to use markdown to format our blog posts. Markdown isn’t getting rendered by default but we can install the marked library to take care of that for us.
The awesome thing about remix is that we can use marked to compile are markdown server-side in a loader function so we don’t have to bundle this hefty library and process markdown in our user’s browsers.
Kent C. Dodds: [0:00] Now, we also want to put out the contents of our post. We'll put it in a div right here. If we just do post.markdown, that's not going to do it for us. Here, if we go to "Trail Riding on Onewheel," we're not seeing this in the format that we want. This is written in Markdown, but we want to have HTML.
[0:20] We're going to install a library called marked to convert Markdown to HTML. We'll import {marked} from 'marked'. Then, we'll use that to get our html, marked(post.markdown). We'll take care of that null option later. Then, we'll pass along html and come down here, take that HTML.
[0:45] Instead of putting it as a child, we're going to dangerouslySetInnerHTML, because this is HTML, as html. It's safe for us to do this because we're the ones making the html and there are much easier ways for us to hack our own website so we don't need to worry about this.
[1:02] If we save that and run npm run dev again to get our dev server up and running, then we've got things laid out the way that we want to. It is now correctly parsed. The cool thing about this is that we are doing this Markdown parsing on the server. We don't have to send this really big library to our end users and process Markdown in their browser.
[1:24] We can do that all in the loader on our server. All that we send them is the post and the html. Again, we're sending more information than we really need to. What we could do is we could just say, title is post.title, and just take our title and get rid of all of that.
[1:45] We've optimized things further where we're definitely not sending any more than what we absolutely need to. We're also not processing anymore on the user's device than is absolutely necessary, thanks to the fact that our loader runs on the server.