⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!

  • How well that static site performs and how easily you can build that site is another story.ProsVery easy to get startedWell documentedConsSubpar developer experience for static functionality no hot-reloadingLarge per-page JS bundles, resulting in a lot of unnecessary duplicate code being downloaded.Difficult root component customizationDestructive routing.
  • We also knew that we needed to ditch built-in proprietary connectors ASAP; being able to get your data from anywhere is important, but the ability to use and access that data in your site is paramount.Most importantly, we needed a tool that would allow us to build things like an…
  • It’s insanely fast, touts fantastic SEO capabilities, and is probably the most React-friendly static-site library on the internet.Let’s get to it.How does it work?react-static starts by exporting a single JS bundle, which includes every template for your entire site.
  • To connect a component to this data, you use a convenient HOC called getRouteProps.The HTML files generated by react-static ensure that pages load instantly and are optimized for SEO.Once the page is loaded, your site invisibly and instantly transitions to your react app.At this point, navigating around your app will…
  • You’ve worked hard enough producing and organizing all of the data for your website, so the last thing you need is some superfluous GraphQL layer or custom component lifecycle lodging itself between your data and your pages.

At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. Over the last year, we’ve launched many sites using different static site tools that claim to solve these…
Continue reading “⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!”

Modern static site generation

  • There is this function called Server Side Rendering where you can produce static HTML content directly from a tree of React.js components.
  • At the time of reading this, this site will already be served by GitHub pages and the content you will see once you view the source it’s been generated by Gatsby.js.
  • Here’s my list:

    At the time that I started following them, all of them were in a very early stage and none of them could generate my site’s content the way I wanted and in the same way as my previous one so to not lose paths and certain functionalities.

  • Think of when you are caching the home page of a WordPress powered site and you are serving the cached content to every visitor.
  • Imagine that instead of having memcached caching your HTML in front of your WordPress site, you trigger a hook each time your database changes that will re-generate the frontend using Gatsby.

In this post, I will talk about static site generators. How they have evolved and why I switched from a Ghost powered site to Gatsby.js, a modern static site generator.
Continue reading “Modern static site generation”

`next export` (static builds) · Issue #604 · zeit/next.js · GitHub

#staticsitegen under consideration by @zeithq -  sweet!
 #ssg #reactjs #blog

  • From my understanding, zeit:now will still wrap static sites in a node.js app (zeit:serve) – and zeit:now even trumps most static deployment options anyway.
  • How about if we ignore getInitialProps for the static build.
  • static sites where each page is then assisted by client-side rendering (requiring some javascript) – e.g. single page web apps
  • static sites where certain pages or abilities require client-side rendering (needing some javascript)
  • balupton commented Jan 15, 2017 edited

next.js – Framework for server-rendered React apps
Continue reading “`next export` (static builds) · Issue #604 · zeit/next.js · GitHub”

Surge VS GitHub Pages: How to deploy a create-react-app project

Surge VS GitHub Pages: How to deploy a create-react-app project  #ReactJS

  • Minimal configuration to deploy a project
  • npm run deploy will first build your project via npm run build .
  • After entering the project path, Surge will suggest a random domain to use.
  • Then use npm run build to prepare your project for deployment.
  • Surge VS GitHub Pages: How to deploy a create-react-app project

As a developer, there are several ways you can show off your skills to peers and prospective employers. Open source contributions are great. Blogging is great. But at some point you’ll want to get…
Continue reading “Surge VS GitHub Pages: How to deploy a create-react-app project”