I recently built a React site using the static site generator Gatsby.JS and was wondering if there was an easy way for me to convert it to a dynamic site? I'm not sure what's best, extract the Gatsby, deploy as dynamic?
You can continue to use Gatsby and still make the site dynamic. It depends what you mean by "dynamic" exactly.
When a user visits your site, Gatsby will boot React as normal. So if you want to fetch some data, show the user something special if they have already logged in, etc, this is all possible.
There are some special rules to consider with Gatsby. Make sure that the first version of your page is the same as what Gatsby sees. So you can add logic into onComponentDidMount to change the UI only after React has loaded.
Otherwise, if you want to simply remove Gatsby altogether, you take your existing React components and move them all to a new project. I'd recommend starting with a blank create-react-app project and copying the components over. The refactoring required should be minimal.
Related
Is this achievable without a framework like Angular/React?
Problem I'm running into is I'm creating a blog and I want to minimize the amount of code I'm using and there's two things I'm looking at:
Changing text on each file
For example, for each blog page, they share the same features such as: header, footer, logo, etc.
However, imagine my blog has 100 posts and now I want to change the text of a link in the footer. This would be applied to every page and instead of going to each page and changing the footer manually, I'd like to be able to change it in one file (i.e. footer.html or footer.json) and it's applied to all the pages. I discovered handlebars.js and unless I'm mistaken, I could use this to achieve this problem I'm facing.
Minimizing page bloat
However, I would like to minimize the page even more. As far as I understand, using something like handlebars wouldn't allow me to shorten the amount of HTML code itself. I'd like to have one blog-post-template.html file and each time the user clicks a link to a post, it would use the blog-post-template.html file and the only thing that would change is the actual blog-post.
For example, in pseudocode for blog-post-template.html:
{header} (gets this from header.html)
{blog-post} (gets this from link attribute and searches for that blog-post-number in database)
{footer} (gets this from footer.html)
I'm pretty sure I know the Angular way of doing this through templating and components but since I decided to create this blog with vanilla JavaScript and possibly jQuery plugins, but I was wondering if this was achievable without using a framework like Angular since I've heard about Angular and SEO not getting along well with each other.
Or if it's more advisable to use a tool like Angular/React to create something like this in my example.
You don't need a JavaScript framework, but you will need to use JavaScript.
You can have your header and footer hard-coded as HTML as you say. But then you'll need a JavaScript function to run and grab the blog post from your headless CRM or database.
I'd just recommend using something like Next.js so you can have the nice tooling of a framework, and no SEO downsides.
If you'd like an SEO-friendly version of React, you could use Next.js or Gatsby. Angular, I think, has ahead-of-time compilation that might do the trick. Or you could check out the html template element
Cheers :)
I have been looking for a few hours for something that could help my problem, but as of now, I havent found it.
The problem is:
I am working on an PHP/Latte server-side rendered website, where I have decided to implement Vue. However, since there is no possibility for me to change this website into an SPA, I need to just create micro components with Vue and use them inside the BE templates.
By that I mean that there is a .latte template, where I insert a <My_component /> element, which gets rendered client side.
Which is fine for some components, but others, like the main menu, product or something else important for SEO purposes, needs to be somehow pre-rendered for crawlers.
By now I have read 10+ articles and watched 4 videos on prerender-spa-plugin, which I am sure is a great solution for SPAs, but I dont think it would work for my case. Especially since I am not using Vue router.
Nuxt.js also seems like not what I want and would be a bit of an overkill in my case.
Basically I just need a webpack or Node based plugin, that would take .vue files, that I would need to be pre-rendered, and create (build) the static HTML for them. Which would be either automatically or by hand inserted into the .latte template.
Has anyone had any experience with this?
I'm using create-react-app-typescript to create a react application. What I'm trying to do is to build the application, then include the resulting js and CSS files into another application (which is a very old application that doesn't know anything about React or any new JavaScript features)
My problem: I want to be able to pass information to my React application; for example, I want to specify an array to be used to display information, but the issue is that as soon as I add a <script> tag to React's js file, it will try to create the application under the target div element.
Not sure if it's a good idea, but I try to avoid ejecting my React application as much as possible so that I wouldn't need to maintain everything myself.
One solution that I thought of was to create an item in localStorage and then read it from my React app, and this somehow solves the issue, but is this a good way to do it?
And then there's another issue: I want to be able to pass a callback from the external application to be called from my React app to cause something to happen in my external application, and this cannot be done using localStorage
Any help or tip is deeply appreciated,
Thank you
You don't have to eject the project at all. One possible solution (maybe not the best) is just to change your index.js to expose your application. Thus instead of directly "rendering" the app do something like following
// needed imports
window.startFromOutside = function(element, callback) {
ReactDOM.render(<ReactApp cb={callback} />, element)
}
That way you can bootstrap your react application from outside passing any properties you want.
My team developed a django website with lot of pages that working completely without javascript or may be with the little jquery manipulation. We want try to use a react library to speed up our pages and add page navigation without full page reloading (we choose react because we implemented some SPA website with react and we like it). Also our pages should working with disable js.
I want to start with one page with 5 forms on it. If any form is submit then page is reloaded, data populated in fields is lost and it work slowly. I think to implementing sending data on ajax and change some html after server answer.
Every react tutorial is saying to write jsx components with html markup inside, convert it with babel to pure js and adding on page dynamically on page load. Or if you want to render pages on server you need to use standalone node server. But I already has a powerfull django template engine to render templates on server side, also I need to render templates with specific django things like multilanguage content, user variables etc.
Can I fully render page with django on server side and after loading say to react, that specific div it's a component with initial state and existing html markup? Or may be you can tell me another solution, without fully rewriting my website. Thanks.
Well, kind of. Every react app starts by specifying a root HTML element to render from. If you want to only render a portion of your website with react, just specify an element that covers the section that you want. Something like this:
ReactDOM.render(<MyMainComponent />, document.getElementById('myReactSection'));
However, in doing so, any existing HTML in there will be overwritten (https://facebook.github.io/react/docs/react-dom.html#render). So you'll need React to re-render the html that was already in there.
Also, you don't NEED babel to write react code, it's just very useful (in conjunction with webpack) to generate a single javascript bundle file to send over to the client that was originally written using the awesome new ES6 syntax (https://babeljs.io/learn-es2015/)
I would like to develop themes/plugins for WordPress based on React. To make it search engine friendly, I need it to be rendered initially on the server (serverside-rendering).
The only way to do this, as far as I know, is to use react-php-v8js, which requires the PECL V8js extension. This is a problem since I have no control over the platform on which these themes/plugins will be run.
Is there a way to make React and WordPress work together without having to install additional extensions? Perhaps by building/compiling React files into PHP?
There's an article that describes how to do this:
https://sebastiandedeyne.com/server-side-rendering-javascript-from-php/
But it's a fairly complex setup and it requires using composer. That can be difficult in Wordpress projects since Wordpress tends to completely eschew the modern php architecture.
If you're looking for a library to help with SSR in PHP:
https://github.com/spatie/server-side-rendering
Best of luck on it.
If you want your content to be indexed by search engine without js, you can print your minimal content using Wordpress, just the bare minimum + crucial meta tags, maybe localize some initial state for your react app to boot. A bare bone theme such http://underscores.me/ would be sufficient. When js is available, you can replace your whole WordPress generated content with React ones.
The ideal one is to have React generate the content for you. But it's hard until we can see that nodejs / PECL V8js extension available everywhere.
If you can at least install nodejs and launch a node process then it should be ok, although not so simple.
You would need to generate a ssr version of your assets and use it in a node process that would listen on a socket to write the html result..
In your controller you can create a socket to your node process (something like stream_socket_client(...)) and then you can send a dummy function written as a javascript string to that socket (something like stream_socket_sendto($sock, "getResultForMyWidget(someParams){...}")). That function would be evaluated in the node process that would return the response to the controller (the html response as a ReactDOMServer.renderToString from the component you want to render).
That's it for the big picture.
There is a symfony plugin that illustates it very clearly (see this github) and comes with a dummy server node process to illustrate how it handles the socket listening and eval of the incoming function and returns the html result. See also the example in the sandbox for a bigger picture and in depth implementation. You should be able to adapt it to wordpress.