Add SSR article

src/pages/blog/7-component-with-nextjs.mdx

@@ -7,7 +7,7 @@ description: a step-by-step guide for creating a reusable component within NextJ
 img: /assets/images/nextjs.jpg
 alt: 
 tags: NextJS, React, Web development, Component, Reusable code, JSX, Exporting, Front-end development, User interface, Code composition
-draft: true
+draft: false
 ---
 
 

src/pages/blog/8-ssr-explained.mdx

@@ -0,0 +1,110 @@
+---
+layout: ../../layouts/BlogPost.astro
+title: Creating a Component in NextJS
+publishDate: 4/21/2023
+writer: Mark
+description: The article provides a step-by-step guide for implementing Server-Side Rendering (SSR) with NextJS, a popular framework for building React-based web applications, with codeblock examples.
+img: /assets/images/ssr.jpg
+alt: 
+tags: NextJS, React, server-side rendering, performance optimization, web development, front-end development, Node.js, SEO, routing
+draft: false
+---
+
+# Server-Side Rendering with NextJS
+
+Server-side rendering (SSR) is an important technique for optimizing the performance of web applications. With SSR, web pages are generated on the server and sent to the client as fully-formed HTML documents. This can improve page load times, reduce the amount of work required by the client's browser, and improve search engine optimization (SEO). In this article, we'll explore how to implement SSR using NextJS, a popular framework for building React-based web applications.
+
+## What is Server-Side Rendering?
+
+Traditionally, web pages have been generated entirely on the client side, using JavaScript to manipulate the HTML, CSS, and other assets in the browser. While this approach has some advantages, such as flexibility and interactivity, it can also lead to slow load times and poor SEO, since search engines may have difficulty crawling JavaScript-generated content.
+
+Server-side rendering addresses these issues by generating the HTML document on the server before sending it to the client. This can result in faster load times, better SEO, and improved performance on low-powered devices.
+
+## Implementing Server-Side Rendering with NextJS
+
+NextJS is a powerful framework for building React-based web applications, and it includes built-in support for SSR. Here's how to implement SSR using NextJS:
+
+1: Create a new NextJS project by running `npx create-next-app` in your terminal.
+
+2: Define your application's routes using the `pages` directory. Each file in this directory will correspond to a route in your application. For example, if you create a file named `about.jsx` in the pages directory, it will correspond to the `/about` route.
+
+
+```
+Note that in NextJS 13 the routing will be handled in the app folder instead of the pages folder. You can read the Docs here: <a href="https://nextjs.org/blog">Next.js 13.3 Blog Post<a>
+```
+
+```jsx
+// pages/about.jsx
+
+import React from 'react';
+
+const AboutPage = () => {
+  return <h1>About us</h1>;
+};
+
+export default AboutPage;
+```
+
+3: Define your page components using JSX. These components will define the content of each page in your application. For example, you might create a component named `HomePage` that renders a list of blog posts.
+
+```jsx
+// components/HomePage.jsx
+
+import React from 'react';
+
+const HomePage = ({ posts }) => {
+  return (
+    <div>
+      <h1>Welcome to my blog</h1>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>{post.title}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default HomePage;
+```
+
+4: Add a `getServerSideProps` function to each page component. This function will be called on the server to generate the HTML document for the page. It should return an object containing the page's props. For example, if your `HomePage` component requires a list of blog posts, the `getServerSideProps` function might fetch that data from an API and return it as a prop.
+
+```jsx
+// components/HomePage.jsx
+
+import React from 'react';
+
+export const getServerSideProps = async () => {
+  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
+  const posts = await res.json();
+  return {
+    props: {
+      posts,
+    },
+  };
+};
+
+const HomePage = ({ posts }) => {
+  return (
+    <div>
+      <h1>Welcome to my blog</h1>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>{post.title}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default HomePage;
+```
+
+5: Start your NextJS application using the `npm run dev` command.
+
+With these steps completed, your NextJS application will now use SSR to generate HTML documents for each page, improving performance and SEO.
+
+## Conclusion
+
+Server-side rendering is an important technique for optimizing the performance and SEO of web applications. With NextJS, implementing SSR is straightforward and can be done using built-in features. By following the steps outlined in this article, you can easily implement SSR in your NextJS application and reap the benefits of faster load times and improved search engine visibility.