There are many cases where the block rendering has to be done on the server-side and only displayed in the editor. For that purpose, the block editor has a ServerSideRender component that can pass block attributes to the server-side rendering function and display rendered HTML as is.
If you are getting started with blocks, you can always use the official ‘@wordpress/create-block’ application to generate a new plugin with a single block. This new plugin would be fine for some use cases, but I prefer a more robust solution.
Like it or not, Block Editor is a big part of the WordPress development focus, and in the coming years, it will be increasingly important to know how to develop blocks and replace shortcodes and widgets that are becoming obsolete and build new functionality too.
WordPress 5.0 was released in late 2018, and it brought a new editor. It is a Block Editor, but it is better known as Gutenberg. And, the new editor introduced the concept of blocks, and the block is set to replace both widgets and shortcodes with more user-friendly controls.
As I announced last week, I decided to start with the Gutenberg (Block Editor) blocks development, exploring the process from the very beginning and trying to do it all with the help of the official WordPress Blocks Documentation.