FormidableLabs/rapscallion

Mariusz Rymarczyk

@Rymar

Hi, i have small problem with understanding how rapscallion caching works. I want to get cached component HTML with toPromise method like here https://jsfiddle.net/ek0mvp52/. Problem is: Component 1 returns empty string, Component 2 returns proper html only on 2nd call and Component 3 returns proper html also only for 2nd call, 3rd attempt is empty. How should it work and what am i doing wrong?

Dale Bustad

@divmain

Hey @Rymar. I'll take a look at it this evening. Thanks for reaching out.

Mateusz Czeladka

@matiwinnetou

I have a question to how Rapscallion works. Generally rendering template is a CPU bound operation. NodeJS is exceptional on IO bound operations with a single event loop model. How come rapscallion is able to turn an CPU bound task of rendering template to promise based async IO bound?

Dale Bustad

@divmain

Hey @matiwinnetou. There's some nuance here that might not be obvious.

Rapscallion doesn't fundamentally change what you know about template rendering.

However, it accomplishes three things:

Dale Bustad

@divmain

It splits up one long-running CPU-bound operation into several short-running CPU-bound operations. This doesn't change the time it takes to render, but it avoids blocking the event loop - which in a server context is very beneficial.
It is more efficient than React's renderToString. There are a number of reasons for this, but gist is that React has to do a lot more than is necessary for SSR because it also has to support client-based rendering. When all pieces of Rapscallion are involved, most of this extraneous code is avoided. This is especially true when Rapscallion's Babel server plugin is employed, since parts of the DOM that can be statically generated are generated at build-time rather than at run-time.
It provides shortcuts to avoid doing work. The primary example of this is Rapscallion's caching layer. If a particular component sub-tree is cached, it only has to be calculated once. This is probably where Rapscallion shines the brightest, since instead of trying to be faster than React at X operation, it just avoids doing X operation altogether.

Let me know if that helps, and I'd be happy to chat more. The code-base is also pretty thoroughly documented, so it might be worth poking through.

Mateusz Czeladka

@matiwinnetou

@divmain it helps a great deal, thanks!

George Pantazis

@gcpantazis

Hey @divmain would it be possible to get a version bump on NPM? I'm experiencing issues with Adler on 2.1.7 and I see that there's been a change in implementation since then.

Aside from that, thanks for an awesome project! Proposing using it with NextJS here: zeit/next.js#2279

George Pantazis

@gcpantazis

Well, disregard. Same issue on master:

/Users/gcp/Thumbtack/universal-frontend/node_modules/@thumbtack/rapscallion/lib/adler32.js:28
    b += a += data.charCodeAt(i);
                   ^

TypeError: data.charCodeAt is not a function

George Pantazis

@gcpantazis

The issue seems to be that I was passing an array of strings to dangerouslySetInnerHTML, which works with renderToString():

<p dangerouslySetInnerHTML={{
        __html: contentItem.content,
}}/>

... if I set __html to contentItem.content[0] it works.

I'll open a ticket.

Duncan Bartlett

@duncanb-porch

@divmain I would also like a version bump on NPM. The latest commits fixed an issue we were having with schema tags.

Dale Bustad

@divmain

I'll working on publishing today @duncanb-porch

Duncan Bartlett

@duncanb-porch

Awesome! Thank you.

therazor

@therazor

I'm trying to render a page that relies on async data in its state

I can only find examples where the state is sync set at the beginning however, is that the only way?

therazor

@therazor

ideally I'd like to do this on the server:
receive request => request data from services => flush static header html to browser => receive data from services => flush everything else out

Attila Bartha

@atikenny

Hi Guys! First of all great work with this tool, second: I am having a problem when switching to rapscallion/babel-plugin-server, it seems that the speical react attributes like className or htmlFor are not transformed into class and for if their value is a simple string. Is there an additional plugin that I need to use for this to happen? After digging into the code a bit I found that renderAttrs function is supposed to take care of this during rendering but since the value is a simple string after the transformation it leaves it as it is. Is this a known issue or am I missing sth? Thanks for the help!

Anthony Landis

@tony-landis

Hi - interested in plugging this into a project that we hacked some solutions for a long while back. One thing we do on the SSR is cache fetch() responses so that when React mounts on the client, the fetch doesn't need to re-run. Is that what rapscallion's caching achieves on the client or is it just the server?

Where communities thrive

People

Repo info

Activity